事件冒泡

Code4App 发布于2019-08-20 14:30 / 984人阅读

摘要：事件冒泡一个元素接收到事件以后，会把自身接收的所有事件全部传播给它的父级，直到最顶层。上述的嵌套关系是存在事件冒泡的。

1、事件冒泡：一个元素接收到事件以后，会把自身接收的所有事件全部传播给它的父级，直到最顶层window。

上述div 的嵌套关系是存在事件冒泡的。无论css如何对上面三个div进行位置的定位。

冒泡机制是默认存在的；

var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var oDiv3 = document.getElementById("div3");
function fn1(){
    alert(this.id);
}
oDiv1.onclick = fn1;//给oDiv1添加了事件处理函数
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;

当点击div3时，不但会弹出div3 还会有div2 div1.
当oDiv2.onclick = fn1被注释时，点击div3，不但会弹出div3 还会有div1 弹出。（这也就是说明，oDiv2.onclick = fn1被注释之后，div2还是能够接收到div3传过来的点击事件，没有弹出div2的原因是没有告诉div2在接收到点击事件后如何进行处理。例如上面的注释不能说是给div2 添加事件，应该是给div2 添加了事件处理函数。）

2、冒泡机制的存在即给我们带了便利也给我们带来了一些不必要的麻烦。冒泡机制是默认存在的（可能是存在带来的好处优于带来麻烦）。

3、阻止事件冒泡：

在当前要阻止冒泡的时间函数中调用：ev.cancelBubble = true;

4、因为事件冒泡要传到父级，如果想对某些结构进行处理的时候，尤其是嵌套结构，可以想一想事件的冒泡机制。

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

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

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

JS中事件冒泡与捕获

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

sixleaves 2019-08-21 10:52 评论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
JS 中的事件冒泡与捕获

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

Rindia 2019-08-20 11:40 评论0 收藏0