So erhalten Sie sprudelnde Elemente im JS-Ereignis-Bubbling-js-Tutorial-php.cn

So erhalten Sie sprudelnde Elemente im JS-Ereignis-Bubbling

WBOY

Freigeben： 2024-02-20 09:13:36

Original

400 Leute haben es durchsucht

So erhalten Sie sprudelnde Elemente im JS-Ereignis-Bubbling

Um das Bubbling-Element in js Event Bubbling zu erhalten, benötigen Sie spezifische Codebeispiele.

Event Bubbling bedeutet, dass, wenn ein Ereignis für ein Element ausgelöst wird, auch dessen oberes übergeordnetes Element das Ereignis empfängt. In JavaScript können sprudelnde Elemente über Ereignisobjekte abgerufen werden. Im Folgenden gebe ich Ihnen ein konkretes Codebeispiel, um zu erklären, wie Sie das Bubbling-Element erhalten.

Zuerst benötigen wir eine HTML-Seite mit verschachtelten Elementen, wie unten gezeigt:

<!DOCTYPE html>
<html>
<head>
<title>事件冒泡示例</title>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <button id="button">点击我</button>
    </div>
  </div>

<script src="script.js"></script>
</body>
</html>

Nach dem Login kopieren

Auf dieser Seite haben wir ein äußeres div-Element (id ist „outer“), ein inneres div-Element (id ist „inner“) und ein Button-Element (ID ist „button“).

Als nächstes benötigen wir eine JavaScript-Datei, um das Ereignis-Bubbling zu verarbeiten und das Bubbling-Element abzurufen. In der Datei „script.js“ verarbeiten wir das Klickereignis und erhalten die ID des bubbling-Elements. Der Code lautet wie folgt:

// 获取外层div元素
var outer = document.getElementById('outer');

// 绑定点击事件处理函数
outer.addEventListener('click', function(event) {
  // 获取冒泡元素的id
  var bubbleElementId = event.target.id;
  
  // 打印冒泡元素的id
  console.log('冒泡元素的id：', bubbleElementId);
});

Nach dem Login kopieren

Im obigen Code erhalten wir zunächst das äußere div-Element über die Methode getElementById und binden dann mithilfe der Methode addEventListener einen Click-Event-Handler daran. In der Ereignisverarbeitungsfunktion wird das Zielattribut des Ereignisobjekts verwendet, um das Element abzurufen, das das Ereignis ausgelöst hat, dh das Blasenelement. Dann erhalten wir die ID des Blasenelements über das ID-Attribut des Zielelements. Schließlich verwenden wir die Methode console.log, um die ID des Bubble-Elements an die Konsole des Browsers auszugeben.

Wenn wir auf die Schaltfläche auf der Seite klicken, wird das Ereignis zum äußeren Div hochgesprudelt, und dann können wir die ID-Ausgabe des aufgeblähten Elements in der Konsole sehen.

Anhand der obigen Codebeispiele können wir klar verstehen, wie man Blasenelemente in JavaScript erhält.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie sprudelnde Elemente im JS-Ereignis-Bubbling. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!