js事件冒泡和事件捕获

2i18ns 发布于2019-08-01 16:47 / 931人阅读

摘要：查阅了一些资料之后才知道原来这就是事件冒泡，下面是我对事件冒泡和事件捕获的理解。本文参考文章之事件冒泡详解事件委托及其原理

前段时间开发一个小项目的时候遇到一个问题，即给一个元素以及它的父元素绑定了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代码：

事件冒泡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代码：


    
       item1
       item2
       item3
       item4
       item5

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标签多带带绑定事件，而采用事件委托这些烦恼都可以省略。

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

GPU云服务器云服务器 js阻止冒泡事件冒泡事件事件冒泡事件冒泡机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50747.html

JS中事件冒泡与捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。考虑下面这段代码，就不写html->head,body之类的代码了，自行脑补 Click me! ...

sixleaves 2019-08-21 10:52 评论0 收藏0
JS 中的事件冒泡与捕获

摘要：在之前是只支持事件冒泡，包括之后和目前主流的浏览器都同时支持两种事件。中可以用来取消事件冒泡。刚接触 JS 的那个时候，啥也不懂，只想着如何利用 Google、百度到的函数来解决实际的问题，不会想到去一探究竟。渐渐的，对 JS 的语言的不断深入，有机会去了解一些原理性东西。最近在看 JQuery 源码，感触很多，总想着用原生的 JS 去实现自己的一个 JQuery 库。说实在的，J...

Rindia 2019-08-20 11:40 评论0 收藏0
彻底搞懂JS事件冒泡与捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。如下假设三层都有事件监听，这时我们点击的小的蓝方框，事件执行的顺序是怎么样的呢红黄蓝事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。如下：假设三层div都...

Half 2019-08-02 15:29 评论0 收藏0
彻底搞懂JS事件冒泡与捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。如下假设三层都有事件监听，这时我们点击的小的蓝方框，事件执行的顺序是怎么样的呢红黄蓝事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。如下：假设三层div都...

zhangxiangliang 2019-08-23 18:36 评论0 收藏0
彻底搞懂JS事件冒泡与捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。如下假设三层都有事件监听，这时我们点击的小的蓝方框，事件执行的顺序是怎么样的呢红黄蓝事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。如下：假设三层div都...

周国辉 2019-08-30 11:22 评论0 收藏0