JS中绑定事件顺序（事件冒泡与事件捕获区别）

在JS中，绑定的事件默认的执行时间是在冒泡阶段执行，而非在捕获阶段（重要），这也是为什么当父类和子类都绑定了某个事件，会先调用子类绑定的事件，后调用父类的事件。直接看下面实例

<!Doctype html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">*{margin:0;padding: 0;}</style>
</head>
<body>
<div  id="id1" style="height:400px;  border:1px solid #000;"><div id="id2" style="height:200px;  border:1px solid #000;"><div id="id3" style="height:50px;  border:1px solid #000;"></div></div>
</div>
</body>
<script type="text/javascript">var obj1=document.getElementById('id1'); obj1.addEventListener('click',function(){alert('id1');},false);var obj2=document.getElementById('id2');obj2.addEventListener('click',function(){alert('id2');},true);var obj3=document.getElementById('id3');obj3.addEventListener('click',function(){alert('id3');},true);/*如果第三个参数为true，则事件在捕获阶段执行，如果第三个参数为false，则事件在冒泡阶段执行*/
</script>
</html>

当点击id3元素时候，执行结果是：id2，id3，id1

解析：因为obj2与obj3绑定的方法在捕获阶段执行，obj1的事件在冒泡阶段执行。

总结

在JS中，绑定的事件默认的执行时间是在冒泡阶段执行，而非在捕获阶段，必须要理解

不过我们可以通过绑定事件时，指定事件执行时间是在冒泡阶段还是捕获阶段。

obj.addEventListener(event,function(){},bool)

bool:false，代表冒泡阶段执行

bool:true，代表捕获阶段执行

JS在默认情况下获取事件后，就开始从根元素开始捕获所有该事件的监听对象，然后在冒泡阶段逐一执行。捕获阶段是在冒泡阶段前面

阻止冒泡

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true；

阻止默认行为

w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

关于JS 事件冒泡和onclick,click,on()事件触发顺序

onclick,click,on()的优先关系：onclick>click>on()；

onclick和click绑定的事件，彼此之间遵守事件冒泡规则，从内到外触发；

on()绑定的事件，总是晚于onclick和click绑定的事件触发；

转载于:https://www.cnblogs.com/cboydream/p/6296896.html

JS中绑定事件顺序（事件冒泡与事件捕获区别）相关推荐

return true Java_[Java教程]js中return,return true,return false的用法及区别
[Java教程]js中return,return true,return false的用法及区别 0 2015-11-16 23:00:03 1.语法及返回方式 ①返回控制与函数结果语法为:retu ...
php in循环与for循环,详谈js中标准for循环与foreach(for in)的区别
js中遍历数组的有两种方式 var array=['a'] //标准的for循环 for(var i=1;i alert(array[i]) } //foreach循环 for(var i in ar ...
html事件中写js,html标签中绑定触发事件与js中绑定触发事件写法上的区别
html> js中方法名后加括号和不加口号的区别按钮 var test = function(){ var span = document.createElement("span&q ...
关于js中绑定事件失效问题
相信很多开始学习前端开发的朋友都发生过绑定事件失效的问题,那么究竟是什么原因使得事件失效呢? 这里作者以jquery库编写作为例子. 第一种:直接失效. <html> <head&g ...
html,js 中如何屏蔽div子元素点击事件会触发父元素的点击事件（$event.cancelBubble=true；）
1. 第一种方法:html中屏蔽父元素的点击事件($event.cancelBubble=true;) <div (click)="select($event)"> & ...
js中使用createEvent和initEvent实现自定义事件
自定义事件分三大步: 1 定义一个事件 2 设置事件监听 3 手动触发事件 <!DOCTYPE html> <html lang="en"><h ...
Silverlight实用窍门系列：35.细解Silverlight冒泡路由事件和注册冒泡路由事件【附带实例源码】...
Silverlight中的事件分为普通事件和冒泡路由事件,它并没有包括WPF中的隧道路由事件,在本章中将详细讲解冒泡路由事件和如何注册一个冒泡路由事件. 一.细解冒泡路由事件冒泡路由事件可以比喻为: ...
php+js+return+true,js中return、return false、return true的区别
1.语法及返回方式 ①返回控制与函数结果语法为:return 表达式; 语句结果函数的执行,返回调用函数,而且把表达式的值作为函数结果返回出去 ②返回控制无函数结果语法为:return; 在大多数 ...
js中定义变量加var和不加var的区别
这个问题其实我在面试的时候有被问到过,当时我记得我回答的很模糊,面试官看到我好像不太清楚,又问我是不是可以不加var定义变量... 正好昨天做项目的时候想到这个问题,觉得这种细节上的问题才是拉开差距的 ...

JS中绑定事件顺序（事件冒泡与事件捕获区别）

总结

关于JS 事件冒泡和onclick,click,on()事件触发顺序

JS中绑定事件顺序（事件冒泡与事件捕获区别）相关推荐

最新文章

热门文章