您好,登录后才能下订单哦!
今天就跟大家聊聊有关JavaScript中绑定事件的顺序是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<!Doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;padding: 0;} </style> </head> <body> <div id="id1" > <div id="id2" > <div id="id3" ></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绑定的事件触发;
看完上述内容,你们对JavaScript中绑定事件的顺序是什么有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。