JavaScript中事件冒泡机制如何理解?一文带你看�
Admin 2021-09-16 群英技术资�
今天给大家分享的是JavaScript中事件冒泡机制的内容,对于新手来说JavaScript事件冒泡机制比较难理解,因此下文有实例及详细的介绍供大家参考,感兴趣的朋友接下来跟随小编一起来了解一下�
DOM事件流(event flow )存在三个阶段:事件捕获阶段� 处于目标阶段� 事件冒泡阶段�
事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件�
事件冒泡(dubbed bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点�
dom标准事件流的触发的先后顺序为:先捕获再冒泡,即当触发dom事件时,会先进行事件捕获,捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现,IE10及以下不支持捕获型事件,所以就少了一个事件捕获阶段,IE11、Chrome 、Firefox、Safari等浏览器则同时存在�
这个方法设定一个事件监听器,当某一事件发生通过设定的参数执行操作。语法是�
addEventListener(event, function, useCapture)
参数 event 是必须的,表示监听的事件,例� click, touchstart 等,就是之前不加前缀 on 的事件�
参数 function 也是必须的,表示事件触发后调用的函数,可以是外部定义函数,也可以是匿名函数�
参数 useCapture 是选填的,填true或者false,用于描述事件是冒泡还是捕获,true表示捕获,默认的false表示冒泡�
移除事件监听
如果要移� addEventListener() 添加的事件监听,就要使用removeEventListener(),语法是�
removeEventListener(event, function)
参数与addEventListener()一致�
兼容�
IE 8及更早的版本,和Opera 7.0及更早的版本,不支持 addEventListener() � removeEventListener() 方法,他们使用的是一下方法代替:
添加事件�
attachEvent(event, function)
移除事件�
**detachEvent(event, function) **
可以用以下方法解决兼容性问题:
if (div1.addEventListener) { div1.addEventListener('click', function () { console.log("支持") }); } else if (div1.attachEvent) { div1.attachEvent('onclick', function () { console.log("不支�") }); }
冒泡和捕获的具体区别
HTML
<div id="div1"> <div id="div2"></div> </div>
JS
<script> var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div1.addEventListener('click',function(){ console.log("div1--捕获阶段") },true); div2.addEventListener('click',function(){ console.log("div2--捕获阶段") },true); div1.addEventListener('click',function(){ console.log("div1--冒泡阶段") }); div2.addEventListener('click',function(){ console.log("div2--冒泡阶段") }); </script>
输出结果(点击div2的时候执行的结果�
解决办法
function stopBubble(e) { if (e && e.stopPropagation) { e.stopPropagation(); //因此它支持W3C的stopPropagation()方法 } else { window.event.cancelBubble = true; //否则,我们需要使用IE的方式来取消事件冒泡 } }
对JavaScript事件冒泡机制就介绍到这,上述实例对大家学习和理解JavaScript事件冒泡机制有一定的帮助,感兴趣的朋友可以参考,想要了解更多JavaScript事件冒泡的内容,大家可以关注群英网络其它相关文章�
文本转载自脚本之�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
如果调用者在函数返回时无法获得预期的结果,但在未来需要通过一定的手段获得,那么函数是异步的。如果函数异步,调用后立即返回,但不会立即返回预期结果�
React中高阶组件HOC怎样用?一些朋友可能对高阶组件HOC的使用不是很了解,因此这篇文章就给大家介绍一下高阶组件HOC,下文有示例代码供大家参考,感兴趣的朋友接下来跟随小编来学习一下吧�
这篇文章给大家分享的是有关js实现购物车功能模块的内容,小编觉得挺实用的,因此分享给大家做个参考,感兴趣的朋友接下来一起跟随小编看看吧�
本文主要介绍Map的相关内容,一些朋友对于JS中怎样用及什么时候用map替代JS对象,这些不是很理解,对此这篇就给大家来讲讲Map,感兴趣的朋友可以参考了解看看�
JS中浮点数转整数有哪些方法?JavaScript中,想要实现浮点数转整数,可以使用的方法有很多,例如使用parseInt()函数、利用位运算符“|”、利用位运算符“^”等等,具体怎样实现呢?下面我们看具体的示例,需要的朋友可以参考�
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078