Comment obtenir des éléments bouillonnants dans un événement js bouillonnant-js tutoriel-php.cn

Comment obtenir des éléments bouillonnants dans un événement js bouillonnant

WBOY

Libérer： 2024-02-20 09:13:36

original

446 Les gens l'ont consulté

Comment obtenir des éléments bouillonnants dans un événement js bouillonnant

Comment obtenir l'élément bouillonnant dans le bouillonnement d'événement js, vous avez besoin d'exemples de code spécifiques

Le bouillonnement d'événement signifie que lorsqu'un événement sur un élément est déclenché, son élément parent supérieur recevra également l'événement. En JavaScript, les éléments bouillonnants peuvent être obtenus via des objets événementiels. Ci-dessous, je vais vous donner un exemple de code concret pour vous expliquer comment obtenir l'élément bouillonnant.

Tout d'abord, nous avons besoin d'une page HTML avec des éléments imbriqués comme indiqué ci-dessous :

<!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>

Copier après la connexion

Dans cette page, nous avons un élément div externe (id est "externe"), un élément div interne (id est "inner"), et un élément bouton (l'identifiant est "bouton").

Ensuite, nous avons besoin d'un fichier JavaScript pour gérer le bouillonnement d'événements et obtenir l'élément bouillonnant. Dans le fichier script.js, nous gérerons l'événement click et obtiendrons l'identifiant de l'élément bouillonnant. Le code est le suivant :

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

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

Copier après la connexion

Dans le code ci-dessus, nous obtenons d'abord l'élément div externe via la méthode getElementById, puis lui lions un gestionnaire d'événements de clic à l'aide de la méthode addEventListener. Dans la fonction de traitement d'événement, l'attribut cible de l'objet événement est utilisé pour obtenir l'élément qui a déclenché l'événement, c'est-à-dire l'élément bouillonnant. Ensuite, nous obtenons l’identifiant de l’élément bulle via l’attribut id de l’élément cible. Enfin, nous utilisons la méthode console.log pour imprimer l'identifiant de l'élément bullé sur la console du navigateur.

Lorsque nous cliquons sur le bouton de la page, l'événement remontera jusqu'au div externe, puis nous pourrons voir la sortie id de l'élément bouillonné dans la console.

Grâce aux exemples de code ci-dessus, nous pouvons clairement comprendre comment obtenir des éléments de bulle en JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!