Heim > Artikel > Web-Frontend > Was ist eine js-Ereignisdelegation? Welche Vorteile bietet die Verwendung der js-Ereignisdelegation?

Was ist eine js-Ereignisdelegation? Welche Vorteile bietet die Verwendung der js-Ereignisdelegation?

不言Original: 2018-08-29 17:37:255903Durchsuche

Was ist eine js-Event-Delegation? Welche Vorteile bietet die Verwendung der Event-Delegation? Ich glaube, viele Freunde haben möglicherweise solche Fragen. Im folgenden Artikel erfahren Sie mehr über das Konzept der js-Ereignisdelegierung und die Vorteile der Verwendung der js-Ereignisdelegation.

1. Was ist js Event-Delegation?

Verwenden Sie Event-Bubbling, um die dynamische Element-Ereignisbindung zu handhaben. Der Fachbegriff heißt Ereignisdelegation. Vereinfacht ausgedrückt geht es darum, Ereignisse an das übergeordnete Element zu binden, um die Bubbling-Ereignisse der untergeordneten Elemente zu überwachen Und um herauszufinden, um welches Unterelement es sich handelt, besteht eine beliebtere Methode darin, es anderen zu überlassen. Dieses Ereignis wurde ursprünglich zu bestimmten Elementen hinzugefügt, aber Sie haben es einer anderen Person hinzugefügt, um das Ereignis abzuschließen. (Was sind die Ereignisse? Siehe: JavaScript Chinese Reference Manual)

Zum Beispiel das folgende Beispiel: Native js implementiert die Ereignisdelegation

<!DOCTYPE html>
<html>
<head>
<title>事件委托测试</title>
</head>
<body>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
ul,li{list-style: none;}
div{display: block;width: 500px;padding: 200px 0 0 200px;}
div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;}
div ul li:nth-child(2n){background: #f00;}
</style>
<div>
    <ul>
        <li><a>测试1</a></li>
        <li><a>测试2</a></li>
        <li><a>测试3</a></li>
        <li><a>测试4</a></li>
        <li><a>测试5</a></li>
        <li><a>测试6</a></li>
        <li><a>测试7</a></li>
        <li><a>测试8</a></li>
    </ul>
</div>
<script type="text/javascript">
document.getElementsByTagName("ul")[0].addEventListener(&#39;click&#39;,function(e){
    alert("点击的内容是："+e.target.innerHTML);
});
</script>
</body>
</html>

Hinweis: Es gibt drei Schritte, um die Ereignisdelegierung in js zu implementieren:

Der erste Schritt: Binden Sie das Ereignis an das übergeordnete Element
Fügen Sie dem Element ein Bindungsereignis hinzu ul, und fügen Sie das Click-Ereignis hinzu. Klicken Sie durch addEventListener. Fügen Sie die Bindung hinzu.

Schritt 2: Hören Sie sich das Bubbling-Ereignis des Unterelements an -element li wird aufblasen

Schritt 3: Finden Sie heraus, aus welchem Unterelement das Ereignis stammt

Verwenden Sie den Parameter e der anonymen Rückruffunktion, um das Ereignisobjekt zu empfangen , und erhalten Sie das Ziel des ausgelösten Ereignisses über Ziel

2. Vorteile der js-Ereignisdelegation:

Vorteile der Ereignisdelegation 1:

Ereignis Durch die Delegationstechnologie kann das Hinzufügen von Ereignis-Listenern zu jedem Wortelement vermieden und die Anzahl der Vorgänge auf DOM-Knoten reduziert werden, wodurch das Neuzeichnen und Umfließen des Browsers reduziert und die Codeleistung verbessert wird. Wir können uns ein Beispiel ansehen: Wir müssen li dynamisch hinzufügen. Klicken Sie auf die Schaltfläche, um Li dynamisch hinzuzufügen.

<input type="button" id="btn" /><ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li></ul>

Ohne Ereignisdelegation machen wir Folgendes:

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;
  for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
      this.style.background = "red";
    }
    aLi[i].onmouseout = function(){
      this.style.background = "";
    }
  }

  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }

  
}

Auf diese Weise können wir sehen, dass es auf dem neu hinzugefügten Li kein Mausbewegungsereignis gibt, wenn die Schaltfläche gedrückt wird wird angeklickt, um ihre Hintergrundfarbe zu ändern.

Weil die for-Schleife bereits ausgeführt wurde, wenn Sie auf Hinzufügen klicken.

Dann nutzen wir dazu die Ereignisdelegation. Das heißt, der HTML-Code bleibt unverändert

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;

  oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "red";
    }
  }
  oUl.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "";
    }
  }
  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }
}

Vorteil 2 der Ereignisdelegierung:

Bei Verwendung der Ereignisdelegierung interagiert nur das übergeordnete Element mit dem DOM, und andere Vorgänge werden im virtuellen JS-Speicher ausgeführt Das hat die Leistung erheblich verbessert. Verwandte Empfehlungen:

Ereignisdelegation in js

Javascript-Ereignisdelegation und jQuery-Ereignisbindung ein, aus und eins

Das obige ist der detaillierte Inhalt vonWas ist eine js-Ereignisdelegation? Welche Vorteile bietet die Verwendung der js-Ereignisdelegation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Fallcode für die Ereigniserfassung in jsNächster Artikel：Fallcode für die Ereigniserfassung in js

In Verbindung stehende Artikel

Mehr sehen