Lier l'événement à l'objet en JavaScript brut

Question

J'ai un élément, qui devrait ajuster largeur + hauteur selon les propriétés du document. Je dois redimensionner chaque fois que l'utilisateur fait défiler la fenêtre.

Y a-t-il une possibilité de lier les événements à cet objet spécifique?

var instance = (function() { 
 
    var w = window, 
 
    d = document, 
 
    e = d.documentElement, 
 
    g = d.getElementsByTagName('body')[0], 
 
    x = w.innerWidth || e.clientWidth || g.clientWidth || 0, 
 
    y = w.innerHeight || e.clientHeight || g.clientHeight || 0, 
 
    z = Math.max(g.scrollHeight || 0, e.scrollHeight || 0, g.offsetHeight || 0, e.offsetHeight || 0, g.clientHeight || 0, e.clientHeight || 0); 
 

 
    // private 
 
    function getMeById(id) { 
 
    return d.getElementById(id); 
 
    }; 
 

 
    // public 
 
    return { 
 
    updateContainer: function(id) { 
 
     console.log('updateContainer'); 
 
     var container = getMeById(id); 
 
     container.style.position = 'absolute'; 
 
     container.style.width = x + 'px'; 
 
     container.style.minHeight = z + 'px'; 
 
    }, 
 
    bindScroll: function() { 
 
     w.addEventListener('scroll', updateContainer(), false); 
 
    } 
 
    }; 
 

 
})(); 
 
instance.updateContainer("test"); 
 

 
/* @TODO: Bind events to object 
 
    w.addEventListener('resize',() => { 
 
    console.log('resize'); 
 
    var container = getMeById("test"); 
 
    updateContainer(container); 
 
    }, true); 
 

 
    w.addEventListener('scroll',() => { 
 
    console.log('scroll'); 
 
    var container = getMeById("test"); 
 
    updateContainer(container); 
 
    }, true); 
 
    */

<div id="test"></div>

Comme vous pouvez le voir sur la "bindScroll()" - fonction, il ne fait aucun sens en ce moment. Y at-il de toute façon pour accomplir la tâche?

Merci d'avance pour votre aide.

Answer 1

Vous pouvez passer l'identifiant dans le rappel eventListener par le liant à la updateContainer:

updateContainer: function(id) { 
    console.log('updateContainer'); 
    var container = getMeById(id); 
    container.style.position = 'absolute'; 
    container.style.width = x + 'px'; 
    container.style.minHeight = z + 'px'; 
}, 
bindScroll: function(id) { 
    window.addEventListener('scroll', this.updateContainer.bind(this,id), false); 
} 

Alors on peut faire:

instance.bindScroll("testcontainer"); 

Note: x et z ne sont pas en direct si vous pouvez recharger les valeurs ...

---

Si vous ajoutez plus et plus de fonctions, votre code pourrait être difficile à gérer. Vous pouvez utiliser l'héritage et un constructeur à la place:

function instance(id){ 
this.el=document.querySelector(id); 
} 
instance.prototype={ 
bindScroll:function(){ 
    window.addEventListener("scroll",this.update.bind(this),false); 
    return this; 
    }, 
    update: function() { 
    var container = this.el; 
    container.style.position = 'absolute'; 
    container.style.width = x + 'px'; 
    container.style.minHeight = z + 'px'; 
    return this; 
} 
}; 

Vous pourriez faire:

var test=new instance("#test") 
test.update().bindScroll();