Qu’est-ce que la délégation d’événements js ? Introduction à la délégation d'événements JavaScript

Cet article vous apporte le contenu sur qu'est-ce que la délégation d'événement js ? L'introduction de la délégation d'événements js a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

Qu'est-ce que la délégation d'événement js ? A quoi bon ? Pour parler franchement, la délégation d'événements js utilise le principe du bouillonnement pour déléguer les événements qui doivent être ajoutés à un élément à son parent, réduisant ainsi l'interaction DOM et réalisant l'optimisation des pages Web.

    var oUl = document.getElementById("newsList");    
    //获取ul
    oUl.onclick = function(e){
                //只有点击li时才会触发相应代码执行
                var evt = e || event;                
                var _target = evt.target || evt.srcElement; 
                if(_target.nodeName.toUpperCase() == "LI"){     
                    console.log(_target.innerHTML);         
                }
            }            
            /*nodeName 属性可依据节点的类型返回其名称。
            如果节点是一个元素节点 , nodeName 属性将返回标签名。
            如果节点是一个属性节点， nodeName 属性将返回属性名。
            其他节点类型, nodeName 属性将返根据不同的节点类型返回不同的节点名称。
             toUpperCase() 转为小写
            */

Si vous l'écrivez de cette façon, vous n'avez pas besoin de parcourir li encore et encore, vous ne pouvez exécuter le DOM qu'une seule fois sur ul pour obtenir l'effet souhaité. Alors, qu’est-ce qui bouillonne et pourquoi peut-on le faire ?
L'événement bouillonnant consiste à capturer le document depuis le nœud qui a déclenché l'événement couche par couche jusqu'à la source de l'événement, puis à remonter couche par couche. Il s'agit du bouillonnement d'événements. Utilisez ce mécanisme de bouillonnement pour réduire les opérations DOM. Une chose à noter est que onclick ne prend pas en charge la capture d'événements comme suit :

oBox.addEventListener("click",function(){
                console.log("click");
            },false);

Cette méthode d'écriture est également appelée. Gestion des événements DOM niveau 2.

• Ajouter un écouteur d'événement : addEventListener (nom de l'événement, fonction de gestionnaire, valeur booléenne)

• Supprimer un écouteur d'événement : RemoveEventListener (nom de l'événement, fonction de traitement )

  Remarque : Le nom de l'événement ne contient pas on.
  La première valeur est le nom de l'événement, la seconde est la fonction de traitement et la troisième valeur booléenne est fausse par défaut. Le gestionnaire d'événements est exécuté dans la phase de bouillonnement. Lorsqu'il est modifié en vrai, le gestionnaire d'événements est exécuté. en phase de capture. Ces deux événements sont identiques, mais ces deux attributs ne sont pas pris en charge dans IE.

• Écouteur d'événement sous IE : attachEvent (nom de l'événement, fonction de traitement), detachEvent (nom de l'événement, fonction de gestion). )
  Remarque : Le nom de l'événement contient on.
  

Lorsque les événements bouillonnent, les organisations bouillonnent. Pour empêcher les bulles, cela signifie empêcher que les événements ne soient déclenchés vers le haut, couche par couche. Les méthodes suivantes peuvent empêcher les événements de se propager.

1. return false ;

2. preventDefault();

3. window.event.cancelBubble = true ;

//兼容火狐 获取event方法function getEvent(){
    if(window.event){return window.event;}
    func = getEvent.caller;    while(func != null){        
    var arg0 = func.arguments[0];        
    if(arg0){            
    if((arg0.constructor == Event || arg0.constructor == MouseEvent
                || arg0.constructor == KeyboardEvent)
                || (typeof(arg0) == "object" && arg0.preventDefault
                && arg0.stopPropagation)){                
                return arg0;
            }
        }
        func = func.caller;
    }    return null;
}//阻止冒泡到下一个事件function stopPropagations(){
    var ev = getEvent();    if (window.event) {
        ev.cancelBubble = true;
    }else if(ev.preventDefault){
        ev.stopPropagation();//阻止冒泡
    }
}

ps : Si la délégation d'événements n'est pas utilisée, les événements DOM ne peuvent pas être obtenus lors de l'ajout de nœuds à la page. Cela peut être résolu en utilisant la délégation d'événements

Recommandations associées :

Délégation d'événements en js

Explication détaillée de l'implémentation JavaScript de la méthode de délégation d'événements

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!