js事件冒泡和事件捕获

2024年3月7日 69次阅读 来源: dayday_up

前段时间开发一个小项目的时候遇到一个问题，即给一个元素以及它的父元素绑定了click事件，这个时候我点击这个元素时，父级元素的clik事件也会触发，这显然不符合要求。查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。

事件冒泡：事件从目标子元素向父级元素逐级传递（目标div -> 父元素 —> body ->html ->document）
事件捕获：事件从最顶级元素向目标子元素逐级传递（document -> html -> body -> 父级元素 -> 目标div）

我理解的事件捕获和事件冒泡其实就是浏览器事件触发的两个阶段。
在不支持w3c标准的浏览器（IE9以下）中，我们用attachEvent(event, fn)方法绑定一个事件时，fn函数只能在冒泡阶段执行且只能在冒泡阶段执行。
在支持w3c标准的浏览器中，我们用addEventListener(event, fn, useCapture)方法绑定一个事件时，其中的useCapture参数即用来指定fn函数是在捕获阶段执行还是在冒泡阶段执行，默认false为冒泡执行，ture为捕获执行。通常为了兼容老版本的IE浏览器（IE以下），我们不设置useCapture参数，或设置成false

下面是示例代码

html代码：

<style type="text/css">
    .parent {height: 120px; width: 120px; background-color: #999; padding: 25px;}
    .child {height: 60px; width: 60px; background-color: #666}
    
  </style>

  <body>
      <div class="parent" id="parent">
      <div class="child" id="child"></div> 
    </div>
  </body>

事件冒泡js代码：

var parent = document.getElementById('parent')
var child = document.getElementById('child')

// click事件冒泡时触发(useCapture参数为false和不加参数时的默认行为)
parent.addEventListener('click', function(e) {
  console.log('parent')
}, false)

child.addEventListener('click', function(e) {
  console.log('child')
  // e.stopPropagation()    // 阻止事件冒泡
}, false)

这个时候点击child元素，控制台会依次弹出child parent，因此事件触发的顺序是child ->parent， 当然如果我们希望点击child元素之后不触发parent元素的click事件，也可以用stopPropagation()来阻止事件的冒泡。

事件捕获js代码：

// click事件捕获时触发
parent.addEventListener('click', function(e) {
  console.log('parent')
}, true)

child.addEventListener('click', function(e) {
  console.log('child')
}, true)

这个时候点击child元素，控制台会依次弹出parent child，因此事件触发的顺序是parent->child

说了那么多，事件冒泡究竟有什么用呢？ 下面我们就利用事件冒泡原理来实现事件委托

事件委托：

什么是事件委托？ 事件委托就是原本你要给一个元素绑定某个事件，但是你不直接绑定在这个元素上，而是绑定在与它相关的元素上，但是效果与绑定在这个元素上一样。 这样做有什么好处呢？ 下面我们做个小例子，当鼠标移动到li上时改变它的背景颜色，鼠标离开时背景颜色恢复

html代码：

<body>
    <ul id="parent">
       <li>item1</li>
       <li>item2</li>
       <li>item3</li>
       <li>item4</li>
       <li>item5</li>
    </ul>
</body>

js代码：

var oParent = document.getElementById("parent");
var oItem = oParent.getElementsByTagName("li");

// 给ul绑定鼠标移入事件
oParent.addEventListener('mouseover', function(e) {
  if(e.target.nodeName.toLowerCase() == "li"){
    e.target.style.background = "red";
  }
})

// 给ul绑定鼠标移出事件
oParent.addEventListener('mouseout', function(e) {
  if(e.target.nodeName.toLowerCase() == "li"){
    e.target.style.background = "";
  }
})

当然你会说我也可以利用循环遍历为每个li都绑定鼠标移入移出事件，当然这是可以的，但是这样你的代码就多了一个循环操作，如果循环多了之后对性能影响就不可忽略了。
还有就是如果你又动态的增加了一个<li>标签，那么你又不得不为这个li标签单独绑定事件，而采用事件委托这些烦恼都可以省略。

本文参考文章：
js之事件冒泡详解 http://www.jb51.net/article/4…
事件委托及其原理 http://www.cnblogs.com/dearxi…

    原文作者：dayday_up
    原文地址: https://segmentfault.com/a/1190000009347738
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞