Résumé des exemples de délégation d'événements js

La délégation d'événements est également appelée proxy d'événement. Pour faire simple, elle lie les événements au parent et écoute les événements bouillonnants des éléments enfants. Quant à ce qu'est le bouillonnement d'événement, si vous avez des questions, veuillez cliquer sur l'événement dans js, qui contient une explication détaillée du bouillonnement d'événement. Que devons-nous savoir lors de l’utilisation de la délégation d’événements ?

1. Lors de l'utilisation de la délégation d'événement, il faut également connaître un concept : la source de l'événement sous l'objet événement.

Source de l'événement : Dans l'événement, l'élément actuellement exploité est la source de l'événement. Par exemple, lorsque nous cliquons sur l'étiquette a et qu'un événement onclick se produit, la source de l'événement est l'étiquette a. Lorsque nous cliquons sur li et qu'un événement onclick se produit, la source de l'événement est li

Comment obtenir le. source d'événement ?

Sous IE : window.event.srcElement;

Sous standard : event.target

Traitement de compatibilité : var target = ev.target||ev.srcElement

2. Trouvez le nom de la balise de l'élément actuel : nodeName (il est en majuscule et vous devez utiliser la méthode toLowerCase() pour le convertir en minuscule)

Après avoir tant écrit, quels sont les avantages de l'utilisation de la délégation d'événements ?

1. Cela peut améliorer les performances

2. Les éléments nouvellement ajoutés auront également des événements précédents

Quant à l'endroit où cela se reflète, laissez-moi utiliser des exemples pour vous donner une idée. .呗

Code HTML

<ul id="ul1">
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>

L'effet que nous souhaitons est que lorsque la souris entre dans le li, la couleur de fond du li correspondant passe au rouge, et lorsque la souris sort , il prend la couleur d'origine

Si la méthode d'écriture générale est comme ça

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
var aLi = oUl.querySelectorAll(&#39;li&#39;);
for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
        this.style.background = &#39;red&#39;;
    }
    aLi[i].onmouseout = function(){
        this.style.background = &#39;&#39;;
    }
}
</script>

Voyons comment utiliser la délégation d'événement

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
oUl.onmouseover = function(ev){
    var ev = ev||event;//兼容性处理
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;red&#39;;
    }
}
oUl.onmouseout = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;&#39;;
    }
}
</script>

Dans ce qui précède Dans la méthode suivante, nous devons lier un événement click à chaque Li , et dans la méthode suivante, nous devons uniquement lier un événement click au parent. Lorsque le nombre de li est petit, ce n'est pas grave. S'il y a beaucoup de li, c'est le cas. il est concevable que la délégation d'événements puisse grandement améliorer les performances

Exemple 2.

Code HTML

<ul id="ul1">
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>
按钮

Nous espérons que lorsque le bouton sera cliqué, li sera ajouté à ul, et chaque fois que la souris entre, la couleur d'arrière-plan de li changera, et l'arrière-plan changera lorsque la souris sortira. Nous savons que si nous utilisons la méthode habituelle, chaque fois que nous ajoutons un li, nous. Vous devez ajouter un événement d'entrée et de sortie pour cela. À quel point c'est gênant, vous le saurez si vous l'essayez vous-même, mais si nous utilisons la délégation d'événement, ce n'est pas nécessaire. Ajoutez-le ensuite à chaque fois, regardez le code suivant. (Je pense que tout le monde sait comment le faire, donc je ne l'écrirai plus. Ci-dessous, j'écrirai simplement comment utiliser la délégation d'événements)

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
var oBtn = document.querySelector(&#39;#btn&#39;);
oUl.onmouseover = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;red&#39;;
    }
}
oUl.onmouseout = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;&#39;;
    }
}
oBtn.onclick = function(){
    var ali = document.createElement(&#39;li&#39;);
    ali.innerHTML = &#39;1111111111111&#39;;
    oUl.appendChild(ali);//不管我们在ul里面添加多少个li我么都不需要再次为其添加绑定事件
}
</script>

Après avoir lu ce qui précède, pensez-vous que la délégation d'événements est vraiment utile? Alors utilisez-le maintenant !

Recommandations associées :

Explication détaillée de l'instance de délégation d'événement JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!