Was ist eine js-Ereignisdelegation? Einführung in die JavaScript-Ereignisdelegierung

Der Inhalt dieses Artikels befasst sich mit der Frage, was eine js-Ereignisdelegation ist. Die Einführung in die js-Event-Delegation hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Was ist js Event Delegation? Welchen Nutzen hat er? Um es ganz klar auszudrücken: Die js-Ereignisdelegation verwendet das Prinzip des Sprudelns, um Ereignisse, die einem Element hinzugefügt werden sollen, an sein übergeordnetes Element zu delegieren, wodurch die DOM-Interaktion reduziert und eine Webseitenoptimierung erreicht wird.

    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() 转为小写
            */

Wenn Sie es so schreiben, müssen Sie li nicht immer wieder durchlaufen, sondern können das DOM nur einmal auf ul ausführen, um den gewünschten Effekt zu erzielen. Was ist also Sprudeln und warum ist das möglich?
Das Bubbling-Ereignis besteht darin, das Dokument von dem Knoten, der das Ereignis ausgelöst hat, Schicht für Schicht bis zur Ereignisquelle zu erfassen und dann Schicht für Schicht aufzusprudeln. Dies ist Event-Bubbling. Beachten Sie, dass onclick keine anderen Schreibmethoden unterstützt:

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

Diese Schreibmethode wird auch DOM-Ebene genannt 2 Ereignisverarbeitung.

• Ereignis-Listener hinzufügen: addEventListener(Ereignisname, Handlerfunktion, boolescher Wert)

• Ereignis-Listener entfernen: removeEventListener(Ereignisname, Verarbeitungsfunktion )

  Hinweis: Der Veranstaltungsname enthält kein on.
  Der erste Wert ist der Ereignisname, der zweite ist die Verarbeitungsfunktion und der dritte boolesche Wert ist standardmäßig falsch. Der Ereignishandler wird in der Bubbling-Phase ausgeführt in der Erfassungsphase. Diese beiden Ereignisse sind identisch, aber diese beiden Attribute werden im IE nicht unterstützt.

• Ereignis-Listener unter IE: attachmentEvent (Ereignisname, Verarbeitungsfunktion), detachEvent (Ereignisname, Verarbeitungsfunktion). )
  Hinweis: Der Ereignisname enthält on.
  

Wenn Ereignisse sprudeln, sprudeln Organisationen sprudelnd, bedeutet, zu verhindern, dass Ereignisse Schicht für Schicht nach oben ausgelöst werden. Die folgenden Methoden können verhindern, dass Ereignisse in die Luft sprudeln.

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: Wenn die Ereignisdelegation nicht verwendet wird, können beim Hinzufügen von Knoten zur Seite keine DOM-Ereignisse abgerufen werden. Dies kann durch die Verwendung der Ereignisdelegation gelöst werden

Verwandt Empfehlungen:

Ereignisdelegierung in js

Detaillierte Erläuterung der JavaScript-Implementierung der Ereignisdelegationsmethode

Das obige ist der detaillierte Inhalt vonWas ist eine js-Ereignisdelegation? Einführung in die JavaScript-Ereignisdelegierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!