js事件冒泡和事件捕获

ermaoL 发布于2019-08-22 18:39 / 1780人阅读

摘要：事件冒泡事件捕获事件委托事件冒泡事件捕获二者联系与区别联系都是事件触发时序问题的术语。绑定事件方法的第三个参数是控制事件触发顺序的，默认为，即事件冒泡若为即事件捕获。

事件冒泡、事件捕获、事件委托 1、事件冒泡、事件捕获二者联系与区别

联系：

(1)、都是 事件触发时序问题 的术语。
(2)、绑定事件方法（addEventListener）的第三个参数是控制事件触发顺序的，默认为false，即事件冒泡；若为true,即事件捕获。

区别：

(1)、事件冒泡： 从触发事件的那个节点一直到document，是自下而上的去触发事件。
(2)、事件捕获： 从document到触发事件的那个节点，即自上而下的去触发事件。

2、事件冒泡

（1）、冒泡事件图示：

 
    事件测试
 
 
 
  
 //结果：
     点击father输出结果： 这是父亲=>father
     
     点击son输出结果：   这是儿子=>son    这是父亲=>father   （事件冒泡：先son，后father）

（2）、上述代码采用的事件冒泡机制：
   1.当点击son元素时，先触发son的点击事件，再触发father的点击事件，打印相应的内容； 
   2.当点击father元素时，只触发father的点击事件，因为father元素冒泡上去没有dom元素设置了click事件的函数

（3）、阻止事件冒泡

e.stopPropagation();

3、事件捕获

事件捕获图示：


    


   

   //结果：
    点击father输出结果：   这是父亲=>father
    点击son输出结果：    这是父亲=>father   这是儿子=>son  (事件捕获：先father,后son)

上述代码采用事件捕捉机制：
 1.当点击son元素时，先触发father的点击事件，再触发son的点击事件，打印相应的内容； 
 2.当点击father元素时，只触发father的点击事件，因为father元素从上面捕捉下来一直到father元素没有dom元素设置了click事件的函数；

4、事件委托

（1）、定义

   事件委托：利用事件冒泡的原理。

（2)、使用情况：当有多个类似元素需要绑定事件时，一个一个去绑定既浪费时间，又不利于性能，这时候可以使用事件委托，给他们的一个共同父级元素添加一个事件函数去处理他
们所有的事件情况，代码如下：


    1234567890987654
    1234567890987654
    1234567890987654
    1234567890987654
    1234567890987654
    1234567890987654

注意：hover事件不能使用事件委托方式。

（3）、虽然上述例子中没有给li添加点击事件，为什么点击相应的li会产生效果，我们可以理解为：虽然我们没有给li设置点击事件，但是默认的点击事件是采用的时间冒泡，冒泡到父
级元素的点击事件是用事件的target属性判断进行点击的元素

e.target 表示在事件冒泡中触发事件的源元素。

并且e.target有很多属性可操作：

- e.target.nodeName  //获取事件触发元素标签的name
- e.target.id  //获取事件触发元素的id
- e.target.className  //获取事件触发元素的className
- e.target.innerHTML  //获取事件触发元素的内容

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/96044.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