捕获与冒泡
如下,有三层DIV结构,div1 > div2 >div3
在每个div上都绑定两个事件监听器:
div1.addEventListener('click', function(){ console.log('div1: capture'); }, true); div1.addEventListener('click', function(){ console.log('div1: bubble'); }, false); div2.addEventListener('click', function(){ console.log('div2: capture'); }, true); div2.addEventListener('click', function(){ console.log('div2: bubble'); }, false); div3.addEventListener('click', function(){ console.log('div3: capture'); }, true); div3.addEventListener('click', function(){ console.log('div3: bubble'); }, false);
在div3上点击时输出:
在div2上点击时输出:
在div1上点击时输出:
阻止冒泡的方法
使用事件对象的 Event.prototype.stopPropagation方法
继续上面的例子,执行下面脚本
div3.addEventListener('click', function(e){ e.stopPropagation(); }, false);
然后再次点击div3,输出:
此时,div3的click事件不会再冒泡到它的父元素了。
相关推荐
想要了解什么是事件捕获与冒泡,需要先了解什么是事件。 什么是事件? 我们知道,在前端开发中,JavaScript负责定义网页的“行为”。这里所说的“定义”,其实指的是开发者可以通过JavaScript语言向浏览器描述一些...
主要介绍了js事件机制----捕获与冒泡机制,结合实例形式分析了js事件机制中捕获与冒泡机制相关原理、操作技巧与注意事项,需要的朋友可以参考下
本文实例讲述了js事件机制—-捕获与冒泡机制。分享给大家供大家参考,具体如下: 先从事件绑定机制说起, 事件绑定机制通过绑定方法addEventListener()实现, 语法格式如下: element.addEventListener(event, function...
js代码-面试题---Array.prototype.sort() 底层原理,事件捕获与冒泡理解
传统事件捕获和冒泡的流程解析
主要介绍了JavaScript中捕获与阻止捕获、冒泡与阻止冒泡详解及实例的相关资料,需要的朋友可以参考下
分享给大家供大家参考,具体如下: 今天学习了事件冒泡和捕获,记录一下。 1.冒泡型事件:事件按照从最特定的事件目标到最不特定的...点击事件捕获冒泡实验</title> </head> <body> <div i
本篇文章主要介绍了JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法,具有一定的参考价值,有兴趣的可以了解一下。
本文主要介绍了JS中绑定事件顺序(事件冒泡与事件捕获区别)。具有很好的参考价值,下面跟着小编一起来看下吧
事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡。 IE9 及之前的版本只支持冒泡 | A —————–|–|—————...
javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件—由外到内 事件冒泡:自下而上的去触发事件—由内到外 绑定事件...
javascript, jquery的事件中都存在事件冒泡和事件捕获的问题,下面将两种问题及其解决方案做详细总结。 事件冒泡是一个从子节点向祖先节点冒泡的过程; 事件捕获刚好相反,是从祖先节点到子节点的过程。 给一个...
事件冒泡及捕获的文档及示例代码,例子写得比较简单,请结合文档来看。
NULL 博文链接:https://sailinglee.iteye.com/blog/740206