JavaScript中绑定事件的顺序是什么

今天就跟大家聊聊有关JavaScript中绑定事件的顺序是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

成都创新互联公司成立于2013年,我们提供高端重庆网站建设公司成都网站制作公司网站设计、网站定制、网络营销推广成都小程序开发、微信公众号开发、网站推广服务,提供专业营销思路、内容策划、视觉设计、程序开发来完成项目落地,为搬家公司企业提供源源不断的流量和订单咨询。




 
 
 
 *{margin:0;padding: 0;}
 



 
 
 
 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,则事件在冒泡阶段执行*/

当点击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绑定的事件触发;

看完上述内容,你们对JavaScript中绑定事件的顺序是什么有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


网站栏目:JavaScript中绑定事件的顺序是什么
文章转载:http://cdiso.cn/article/jpgcjo.html

其他资讯