HONG之间
上班折腾，下班折腾

Power by hongyu

文章均为原创，转载请务必注明出处

【事件处理】冒泡与捕获

阅读量 0
作者：hongyu
2024-10-28 10:11:56

在html中，有一部分事件具有事件传播的特性，他的特性是从根节点开始，一层一层捕获触发事件的目标节点，然后从目标节点开始，一层一层的冒泡到根节点，我们用代码来直观的看一下这一特性：

<!DOCTYPE html>
<html>

<head>
 <title>事件冒泡和捕获demo</title>
 <meta charset="utf-8">
</head>

<body>
 <div id="rootDiv">
  <div id="inner">
   <button id="button">点击我!</button>
  </div>
 </div>

 <div id="messages" style="margin-top: 20px;"></div>

 <script>
  var messages = []
  document.getElementById("button").addEventListener("click", function (ev) {
   messages.push("冒泡过程-按钮被点击")
   document.getElementById("messages").innerHTML = messages.join(",<br/><br/>")
  },);
  document.getElementById("inner").addEventListener("click", function (ev) {
   messages.push("冒泡过程-中间div被点击")
   document.getElementById("messages").innerHTML = messages.join(",<br/><br/>")
  },);
  document.getElementById("rootDiv").addEventListener("click", function (ev) {
   messages.push("冒泡过程-根节点被点击")
   document.getElementById("messages").innerHTML = messages.join(",<br/><br/>")
  },);
  document.body.addEventListener("click", function (ev) {
   messages.push("冒泡过程-body被点击")
   document.getElementById("messages").innerHTML = messages.join(",<br/><br/>")
  },)
  document.body.parentElement.addEventListener("click", function (ev) {
   messages.push("冒泡过程-html被点击")
   document.getElementById("messages").innerHTML = messages.join(",<br/><br/>")
  },)


  document.getElementById("button").addEventListener("click", function (ev) {
   messages.push("捕获过程-按钮被点击")
   document.getElementById("messages").innerHTML = messages.join(",<br/><br/>")
  }, true);
  document.getElementById("inner").addEventListener("click", function (ev) {
   messages.push("捕获过程-中间div被点击")
   document.getElementById("messages").innerHTML = messages.join(",<br/><br/>")
   // ev.stopPropagation() // 停止事件传播
  }, true);
  document.getElementById("rootDiv").addEventListener("click", function (ev) {
   messages.push("捕获过程-根节点被点击")
   document.getElementById("messages").innerHTML = messages.join(",<br/><br/>")
  }, true);
  document.body.addEventListener("click", function (ev) {
   messages.push("捕获过程-body被点击")
   document.getElementById("messages").innerHTML = messages.join(",<br/><br/>")
  }, true)
  document.documentElement.addEventListener("click", function (ev) {
   messages.push("捕获过程-html被点击")
   document.getElementById("messages").innerHTML = messages.join(",<br/><br/>")
  }, true)
 </script>
</body>

</html>

从上图可以看出，事件的捕获先触发，一步一步的走到目标节点，然后目标节点开始，一步一步的冒泡到根节点。

阻止事件传播

阻止事件传播的函数是"stopPropagation"，在Event对象实例上，我们在监听事件的回调函数上可以获得，调用之后，对于这条链路上之后的无论是捕获事件还是冒泡事件都不会被触发，比如我们在inner的捕获的回调函数上使用停止传播函数，那么结果就会显示如下：

综上所述

我们在事件交互的处理上，可以灵活运用事件捕获和事件冒泡过程，以及停止事件传播函数。

评论一下