Ereignisdelegation in js

Dieser Artikel teilt Ihnen hauptsächlich die detaillierte Erklärung von Beispielen für die Ereignisdelegierung in js mit. Wir teilen Ihnen hauptsächlich zwei Inhalte mit: 1. Das Prinzip sowie die Vor- und Nachteile der Ereignisdelegation. 2. Handgeschriebenes natives js um die Event-Delegation und ihre Anforderungen browserkompatibel zu implementieren.

F: Die Prinzipien sowie Vor- und Nachteile der Ereignisdelegation (delegierte Ereignisse)

A: Delegierte (Proxy-)Ereignisse sind solche, die es sind gebundene Ereignisse, die übergeordneten Elementen zugewiesen sind, aber nur verschoben werden, wenn bestimmte Übereinstimmungsbedingungen erfüllt sind. Dies wird durch den Event-Bubbling-Mechanismus erreicht.

Die Vorteile sind:

(1) Es kann viel Speicherverbrauch einsparen und reduzieren Bei der Registrierung von Ereignissen wäre es beispielsweise großartig, alle td-Klickereignisse in der Tabelle als Proxy zu verwenden

(2) Es kann erkannt werden, dass beim Hinzufügen eines neuen Unterobjekts ein Proxy vorhanden ist Für den dynamischen Inhaltsteil ist es nicht erforderlich, das Ereignis erneut daran zu binden. Besonders geeignet

Die Nachteile sind:

Die häufig verwendeten Anwendungen von Ereignis-Proxys sollten auf die oben genannten Anforderungen beschränkt werden. Wenn alle Ereignisse als Proxys verwendet werden, kann es zu einer Fehleinschätzung von Ereignissen kommen, d. h. Ereignisse, die nicht ausgelöst werden sollten, sind an Ereignisse gebunden.

Beispiel:

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");
});

Durch Klicken auf das Schaltflächenelement wird zum UL.toolbar-Element gesprungen, z. B .target, um die aktuell angeklickte Schaltfläche zu finden.

F: Handgeschriebenes natives JS implementiert den Ereignis-Proxy und erfordert kompatible Browser

A: Tatsächlich dient es dazu, das Verständnis des Ereignisses zu beurteilen Objekt e und der entsprechende Attributname unter 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");
})

Demo ansehen

Verwandte Empfehlungen:

Detaillierte Erläuterung der JS-Ereignisdelegation Instanz

Das obige ist der detaillierte Inhalt vonEreignisdelegation in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!