什么是html的事件冒泡,JS事件冒泡、停止冒泡、addEventListener--实例演示-优快云博客

前面说到的事件冒泡不是很明了，接上节问题，再记录一下

core!!!!!

1.上面div中，如果单击core，会执行多少个alert？先后顺序是什么？

该问题的答案取决于浏览器的对事件处理的机制。对于下图的结构，当两个element都绑定了onclick方法时，执行的顺序是什么？

-----------------------------------

| element1 |

| ------------------------- |

| |element2 | |

| ------------------------- |

| |

-----------------------------------

Netscape主张元素1的事件首先发生，这种事件发生顺序被称为捕获型

微软则保持元素2具有优先权，这种事件顺序被称为冒泡型

DOM同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触发DOM中的所有对象，从document对象开始，也在document对象结束。

冒泡型：

1.对于某个节点，触发的一个事件，会首先执行当前这个dom节点绑定的方法

2.执行完毕后，会冒泡至改节点的父节点，执行相应的函数

3. 重复以上过程，直至Dom的根节点。

对于上文中的例子，单击#core,

1.首先触发alert(\'core\')

2.然后冒泡至#inner节点，触发alert(\'inner\')

3.最后冒泡至#outer节点，触发alter(\'outer\')

假设对于#inner,我们未为onclick事件指定方法，那么在第二步，不会有方法执行，但是click的事件，仍会继续冒泡至最外层的#outer.

捕获型

事件捕获的顺序刚好与之相反

1.当一个事件发生时，最外层的已绑定该事件的方法会执行

2.然后该事件会下降至他的子节点，触发相应的方法

3.重复1,2的过程

如何加入一个捕获型/冒泡型事件

参照上文给出的例子，我们直接在html中绑定事件方法，这个事件就是冒泡型事件

当采用原生Javascript(非Jquery)方法，我们使用addEventListener绑定事件当第三个参数是false的时候，这个事件就是冒泡型事件(第三个参数的默认值是false).以下两种写法等价。

core.addEventListener("click",function(){alert(\'dddddd\')},false);

core.addEventListener("click",function(){alert(\'dddddd\')});

我们使用addEventListener绑定事件当第三个参数是true的时候，这个事件就是捕获型事件

core.addEventListener("click",function(){alert(\'dddddd\')},true);

addEventListe //IE方法，兼容代码前面写过了

stopPropagation()是停止冒泡事件流。

当我们为一个事件绑定的方法中，添加一句stopPropagation,那么该事件的冒泡过程到此为止，其后的所有节点绑定事件都不执行；

没有方法去停止捕获事件流，当然，从功能上看也即没必要，也不合理。

core !! !!!

var core = document.getElementById(\'core\');var outer = document.getElementById(\'outer\');

//addEventListener冒泡

core.addEventListener("click",function(e) {

alert(\'dd\');

e.stopPropagation();//阻止事件冒泡},false);

core.addEventListener("click",

function(e) {

alert(\'dd\');

e.stopPropagation(); //阻止事件冒泡

false);

//onclick冒泡

core.οnclick= function(e) {

alert(\'core\');

e.stopPropagation();//阻止事件冒泡

};

outer.οnclick= function(e) {

alert(\'outer\')

};

下面是代码，保存成html文件，看看效果；

display: table;

margin: 100px;

}

#outer{

width:400px;

height:400px;

background-color: blue;

}

#inner{

vertical-align: middle;

width:200px;

height:200px;

background-color: white;

}

#core{

width:80px;

height:80px;

background-color: red;

text-indent: 10px;

line-height: 50px;

}

core!!!!!

var core = document.getElementById(\'core\');

core.addEventListener("click",function(){alert(\'dddddd\')},false);//addEventListener: can add one more event to node "core"

functionstopbubble(e){

e.stopPropagation();//stop bubble event on this node

}

前端效果：

点击core！！！后：

1.先alert core 因为绑定了dddd，然后会alert dddd；

2.然后冒泡到inner节点后，alert inner，但是同时执行stopbubble(arguments[0])来停止冒泡；

3.停止冒泡后，该node后续节点就不执行了，所以不会alert outer；

转自：https://www.cnblogs.com/McQueen1987/p/3950547.html