Lernen Sie die Prinzipien des Click-Event-Bubblings kennen und erfahren Sie, wie Sie es in der Webentwicklung einsetzen

Verstehen Sie das Prinzip des Click-Event-Bubblings und seine Anwendung in der Webentwicklung.

Bei der Webentwicklung ist häufig die Interaktion mit Benutzern beteiligt. Unter ihnen sind Ereignisse einer der wichtigen Mechanismen, um diesen interaktiven Effekt zu erzielen. Unter diesen Ereignissen ist das Klickereignis das am häufigsten verwendete. Wenn Sie lernen, das Prinzip des Click-Event-Bubblings und seine Anwendung in der Webentwicklung zu verstehen, können Sie den Ereignismechanismus besser verstehen und ein umfassenderes Benutzerinteraktionserlebnis erzielen.

1. Das Prinzip des Click-Event-Bubblings

Wenn ein Ereignis auf einem Element auftritt und das Element über ein übergeordnetes Element verfügt und das übergeordnete Element auch an denselben Ereignistyp gebunden ist, wird das Ereignis vom ausgelöst Untergeordnetes Element nacheinander. Die Ebenen steigen bis zum obersten übergeordneten Element auf. Dieser Vorgang wird als Event-Bubbling bezeichnet.

Zum Beispiel gibt es eine Webseite mit der folgenden HTML-Struktur:

<div id="box">
  <button id="btn">点击</button>
</div>

Angenommen, ein Click-Event-Listener ist an diese Schaltfläche gebunden:

document.getElementById("btn").addEventListener("click", function(){
  console.log("按钮被点击了");
});

Wenn auf die Schaltfläche geklickt wird, gibt die Konsole „Auf die Schaltfläche wurde geklickt“ aus. Dies liegt daran, dass das Klickereignis der Schaltfläche den Listener ausgelöst hat.

Wenn wir einen Ereignis-Listener desselben Typs an das übergeordnete Element div binden:

document.getElementById("box").addEventListener("click", function(){
  console.log("div被点击了");
});

Auf diese Weise wird beim Klicken auf die Schaltfläche nicht nur „Schaltfläche wird angeklickt“, sondern auch „div wird angeklickt“ ausgegeben . . Dies liegt daran, dass das Click-Ereignis, nachdem es auf der Schaltfläche ausgelöst wurde, weiterhin zum übergeordneten Element div aufsteigt.

2. Anwendung von Click-Event-Bubbling

1. Verbesserung der Wartbarkeit und Skalierbarkeit des Codes

Durch Klicken auf Event-Bubbling können wir einen Event-Listener an das übergeordnete Element binden, ohne Event-Listener separat an jedes untergeordnete Element zu binden. Dies kann die Codemenge erheblich reduzieren und die Wartung und Erweiterung erleichtern.

Angenommen, es gibt eine ul-Liste mit mehreren li-Elementen. Dies wird erreicht, wenn auf ein li-Element geklickt wird, dessen Hintergrundfarbe geändert wird. Wir können den Code so schreiben:

<ul id="list">
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>

var lis = document.getElementById("list").getElementsByTagName("li");
for(var i=0; i<lis.length; i++){
  lis[i].addEventListener("click", function(){
    this.style.backgroundColor = "red";
  });
}

Wenn wir jedoch später neue Li-Elemente hinzufügen müssen, müssen wir ihn erneut im JavaScript-Code pflegen. Und wenn wir Event-Bubbling verwenden, müssen wir nur einen Event-Listener an das ul-Element binden:

document.getElementById("list").addEventListener("click", function(e){
  if(e.target.tagName.toLowerCase() === "li"){
    e.target.style.backgroundColor = "red";
  }
});

Egal wie viele li-Elemente es gibt, wir brauchen nur einen Listener, und wir können den Event-Bubbling-Mechanismus verwenden, um ihn zu aktivieren Das übergeordnete Element erfasst das Ereignis und ermittelt dann anhand der Ereignisquelle, auf welches untergeordnete Element geklickt wurde.

2. Event-Delegation implementieren

Durch die Nutzung von Event-Bubbling können wir die Funktion der Event-Delegation implementieren. Unter Ereignisdelegation versteht man die Übergabe der Ereignisse eines Elements an sein übergeordnetes Element oder ein übergeordnetes Element zur Verarbeitung. Dies reduziert die Anzahl der Zuhörer und erleichtert die dynamische Bindung.

Angenommen, wir haben eine Tabelle und wenn die Maus über eine Zelle bewegt wird, ändert sich die Hintergrundfarbe dieser Zelle. Wir können den Code so schreiben:

<table id="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

var tds = document.getElementById("table").getElementsByTagName("td");
for(var i=0; i<tds.length; i++){
  tds[i].addEventListener("mouseover", function(){
    this.style.backgroundColor = "yellow";
  });
  tds[i].addEventListener("mouseout", function(){
    this.style.backgroundColor = "white";
  });
}

Wenn wir jedoch später neue Zellen hinzufügen müssen, müssen wir ihn erneut im JavaScript-Code pflegen. Und wenn wir Event-Bubbling verwenden, müssen wir nur einen Event-Listener an das Tabellenelement binden:

document.getElementById("table").addEventListener("mouseover", function(e){
  if(e.target.tagName.toLowerCase() === "td"){
    e.target.style.backgroundColor = "yellow";
  }
});
document.getElementById("table").addEventListener("mouseout", function(e){
  if(e.target.tagName.toLowerCase() === "td"){
    e.target.style.backgroundColor = "white";
  }
});

Durch die Beurteilung der Ereignisquelle können wir vermeiden, an jede Zelle einen Listener zu binden. Dies reduziert die Anzahl der Zuhörer und erleichtert die dynamische Bindung.

Kurz gesagt, das Verständnis des Prinzips des Click-Event-Bubblings und seiner Anwendung in der Webentwicklung kann die Wartbarkeit und Skalierbarkeit des Codes verbessern und gleichzeitig die Funktion der Ereignisdelegierung erkennen. Gleichzeitig kann die Benutzerinteraktion durch Event-Bubbling besser gesteuert und verarbeitet werden. In der tatsächlichen Webentwicklung werden ein umfassendes Verständnis und eine flexible Verwendung des Click-Event-Bubbling-Mechanismus die Entwicklungseffizienz und das Benutzererlebnis erheblich verbessern.

Das obige ist der detaillierte Inhalt vonLernen Sie die Prinzipien des Click-Event-Bubblings kennen und erfahren Sie, wie Sie es in der Webentwicklung einsetzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!