Cet article partage principalement avec vous l'explication détaillée des exemples de délégation d'événements en js. Nous partageons principalement avec vous deux contenus : 1. Le principe et les avantages et inconvénients de la délégation d'événements en js. pour implémenter la délégation d’événements et ses exigences compatibles avec le navigateur.

Q : Les principes, avantages et inconvénients de la délégation d'événements (événements délégués)

A : Les événements délégués (proxy) sont ceux qui sont Événements liés attribués aux éléments parents, mais ne seront déplacés que lorsque certaines conditions de correspondance sont remplies. Ceci est réalisé par le mécanisme de bouillonnement des événements

Les avantages sont :

(1) Cela peut économiser beaucoup d'utilisation de la mémoire et. réduire les événements L'enregistrement, par exemple, ce serait bien de proxyer tous les événements td click sur la table

(2) On peut se rendre compte que lorsqu'un nouveau sous-objet est ajouté, il n'est pas nécessaire d'y lier à nouveau des événements, pour la partie contenu dynamique Particulièrement adapté

Les inconvénients sont :

Les applications couramment utilisées de les proxys d'événements doivent être limités aux exigences ci-dessus. Si tous les événements sont utilisés comme proxys, il est possible qu'une erreur d'évaluation des événements se produise, c'est-à-dire que les événements qui ne devraient pas être déclenchés sont liés aux événements.

Exemple :

var toolbar = document.querySelector(".toolbar");
toolbar.addEventListener("click", function(e) {
  var button = e.target;
  if(!button.classList.contains("active"))
    button.classList.add("active");
  else
    button.classList.remove("active");
});

Cliquer sur l'élément bouton fera apparaître une bulle vers l'élément UL.toolbar, en utilisant e .target pour localiser le bouton actuellement cliqué.

Q : Le js natif manuscrit implémente un proxy d'événement et nécessite des navigateurs compatibles

R : En fait, il s'agit d'évaluer la compréhension de l'événement objet e et le nom de l'attribut correspondant sous IE.

function delegateEvent(interfaceEle, selector, type, fn) {// ============ 简单的事件委托
    if(interfaceEle.addEventListener){
    interfaceEle.addEventListener(type, eventfn);
    }else{
    interfaceEle.attachEvent("on"+type, eventfn);
    }
    function eventfn(e){
    var e = e || window.event;    
    var target = e.target || e.srcElement;
 
  
 //如果目标元素与选择器匹配则执行函数
    if (matchSelector(target, selector)) {
            if(fn) {
 //将fn内部的this指向target（在此之前this都是指向的绑定事件的元素即interfaceEle）
                fn.call(target, e); 
            }
        }
    }
}
/**
 * only support #id, tagName, .className
 * and it's simple single, no combination
 */
//比较函数：判断事件的作用目标是否与选择器匹配；匹配则返回true
function matchSelector(ele, selector) {
    //
 如果选择器为ID
    if (selector.charAt(0) === "#") {
            
        return ele.id === selector.slice(1);
   
    }
 
     //charAt(0),返回索引为0的字符
 
   //slice(a，b),从已有的数组或字符串返回从索引从a处开始，截取到索引b之前的子数组或子字符串；
    //如果选择器为Class
    if (selector.charAt(0) === ".") {
        return (" " + ele.className + " ").indexOf(" " + selector.slice(1) + " ") != -1;
    }
    //
 如果选择器为tagName
    return ele.tagName.toLowerCase() === selector.toLowerCase();
}
//toLowerCase()将字符串转换成小写
//调用
var op = document.getElementById("op");
delegateEvent(op,"a","click",function(){
    alert("1");
})

Voir la démo

Recommandations associées :