什么是冒泡？ DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。...事件冒泡**（***dubbed bubbling***）**：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。...dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。...参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡。...()方法 } else { window.event.cancelBubble = true; //否则，我们需要使用IE的方式来取消事件冒泡
先上结论： 他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。...绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。...Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。...事件的触发顺序自内向外，这就是事件冒泡。...事件触发顺序变更为自外向内，这就是事件捕获。 方法： 阻止事件冒泡 和默认行为。 事件冒泡： ? 阻止默认行为： ?
事件目标 如今。事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，可是没有被全部浏览器实现 。...jQuery对这个事件对象进行了必要的扩展，从而在不论什么浏览器中都能够使用这个属性。通过.target，能够确定DOM中首先接收到事件的元素（即实际被单击的元素）。...我们能够不把检查代码放在这里，而是通过改动button的行为来达到目标 。 2. 停止事件传播 事件对象还提供了一个.stopPropagation()方法，该方法能够全然阻止事件冒泡。...这样的行为与我们讨论的事件处理程序不是同一个概念，它是单击锚元素的默认操作。类似地，当用户在编辑完表单后按下回车键时。会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。...假设我们不希望运行这样的默认操作。那么在事件对象上调用.stopPropagation()方法也无济于事，由于默认操作不是在正常的事件传播流中发生的。
事件冒泡： 事件冒泡由IE团队提出来的，即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。...IE9，chrome，Firefox，Opera，Safari都支持事件冒泡，并将事件冒泡到window对象。 如下，点击obj3，依次弹出obj3、world、hello。...addEventListener('click', function () { alert('obj3'); })//依次弹出obj3、world、hello 阻止事件冒泡的方法...event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。...事件捕获： 事件捕获是由Netscape Communicator团队提出来的，是先由最上一级的节点先接收事件，然后向下传播到具体的节点。
事件机制 ---- 事件触发三个阶段： window往事件触发处传播，遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 从事件触发处往window传播，遇到注册的冒泡事件会触发 事件触发一般会按照...|------------------------------------------- 但是有一个特例：如果给body中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。...和outer上面，而且这两个事件处理函数的useCapture选项为true,说明他们被注册在捕获阶段的。...此时进入冒泡阶段，inner上的时间处理器得到执行 事件命中元素后开始向上冒泡，一路查找是否注册了冒泡阶段的祖先元素上的时间处理器。由于没有找到因此什么也没发生。...我们把时间注册在冒泡阶段（addEventListener的useCapture选项为false） var selector = document.querySelector.bind(document
事件冒泡及阻止 当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级，一直到window，当然其传播的是事件，绑定的执行函数并不会传播，如果父级没有绑定事件函数，就算传递了事件，也不会有什么表现...事件冒泡的原因是事件源本身可能没有处理事件的能力，即处理事件的函数并未绑定在该事件源上。它本身并不能处理事件，所以需要将事件传播出去，从而能达到处理该事件的执行函数。...实例 当点击id为i3的时，浏览器会依次弹出3 2 1，这就是事件冒泡，此正方形处于叶节点上，对其操作的事件会向上进行冒泡，直到根节点。 JS事件冒泡及阻止 div{...有时候我们并不希望事件冒泡而去执行上级节点绑定的事件，这时候就需要阻止事件的冒泡，w3c的方法是e.stopPropagation()，IE则是使用 window.event.cancelBubble
事件与事件流 事件，是文档或浏览器窗口发生的一些特定的交互事件。事件流，描述的是页面中接收事件的顺序。 默认情况下，事件使用冒泡事件流，不使用捕获事件流。...捕获与冒泡 事件捕获：执行顺序(document->html->body->div) 事件冒泡：执行顺序(div->body->html->document) IE < 9：只支持事件冒泡...IE 9+|chrome|firefox|safari：事件冒泡+事件捕获 阻止捕获与冒泡 event.stopPropagation() 示例代码 <!...('click', function (event) { console.log('middle-->事件冒泡'); // 阻止事件冒泡，外层不会再捕获到事件...}, false); outer.addEventListener('click', function (event) { console.log('outer-->事件冒泡
讲 事件冒泡 、阻止冒泡 和 事件捕获 之前先说说什么是事件流，这样会更容易明白 一、事件和事件流 1、什么是事件 事件是可以被 JavaScript 侦测到的行为。...一个完整的JS事件流是从window开始，最后回到window的一个过程。 事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。...二、事件冒泡 看了上面的那张图应该对事件冒泡有了大概的了解了吧。总结来说就是： 当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window。...三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾，就可以做到阻止冒泡事件。...事件句柄在冒泡阶段执行 从上面的表格中，可以看到参数值useCapture，为true的时候，事件在捕获过程中就会执行。
说到js事件大家肯定都知道，那么今天讲一点大家不知道的(假设大家不知道?)。 所有的js事件都会分为两个阶段捕获和冒泡。...true表示监听事件的捕获阶段，false表示监听事件的冒泡阶段。 返回值 没有返回值 示例： <!...然后是inner冒泡阶段 最后是outer冒泡阶段 由此我们可以看到，事件触发的时候实际上都是有捕获和冒泡阶段的，并且捕获阶段会从最外层的父级元素开始捕获，一直捕获到最后触发事件的那个元素点才会停止，...并且事件的触发是先捕获，在冒泡。 阻止事件冒泡 事件的冒泡会让我们实现某些功能的时候产生阻碍，那么我们怎么怎么阻止事件的冒泡呢，这个时候就会用到一个方法。...这样就成功的阻止了事件的冒泡，是不是很神奇，那么我们阻止事件冒泡还有别的方法吗，答案是肯定的，这时候就得了解一下我们的event对象了,我们打印一下event对象，如下： 打印发现当我们触发事件时，
当父子元素中都有点击事件的时候，为了让触发子元素中的事件时，不去触发父元素中的事件，可以在子元素事件中添加stop来阻止事件冒泡。....stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交 .self 是只有是自己触发的自己才会执行...,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号 .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式 .once 是将事件设置为只执行一次,如 .click.prevent.once...这个 .passive 修饰符尤其能够提升移动端的性能。 阻止click事件冒泡(防止触发另一个事件)的方法 使用vue阻止子级元素的click事件冒泡。...方法二 可以自己写个阻止冒泡事件 然后在发生冒泡的元素中调用这个事件 @click="_stopPropagation($event)" methods：{ _stopPropagation
今天想实现一个事件自动订阅到指定class的元素之上的功能。这句话很拗口，稍后解释！ 在翻阅了MDN上api说明，多明白了许多细节。...1、event除了具有目标元素，事件类型，时间，位置等有效值 外，还有 bubbles cancelable 等 与冒泡相关的属性。...区别就是：preventDefault:当事件有cancelable=true时， 事件就取消了 stopPropagation :事件停止向DOM的上级传播。...（即使当前元素还绑定着其它的函数，函数本应该稍后执行的情况， 后面的函数都会不执行，好霸气的方法） 3、用CustomEvent来实现自定义事件。...再执行dispatchEvent的一下语句。 这样就有机会根据上次事件结果，来决定是否终止事件链！
'block'; var oEvent = ev || event; oEvent.cancelBubble = true; // 取消事件冒泡
刷新页面 点击“外部BTN” 结果如图所示 因为事件的引发者没有在panl1中所以不会再触发panel1的事件了 以上说的都是非冒泡事件，事件的执行顺序是从外层容器到内层容器执行的 5....如果要在事件冒泡阶段捕捉事件 创建事件的代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数bubbles应为...是false 这样设置后就是冒泡事件，事件的执行顺序是从内层容器到外层容器执行的 6....如果即要捕捉非冒泡事件，又要捕捉冒泡事件 那么 创建事件的代码为 var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数...);//非冒泡监听 this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,false);//冒泡监听 这样设置之后，事件先从外部执行到内部
/jquery-1.11.0.min.js" type="text/javascript"> ...在上面的函数中，先弹出 “我是li”然后弹出“我是ul”，最后弹出“我是div” 一层一层的冒泡，而阻止冒泡的方式就是调用 事件的对象来调用stopPropagation()方法。...这个事件的对象就是函数的参数 e 这个e的名字可以随便取--> 请点击我 说明...： 1.一个事件起泡对应触发的是上层的同一事件 单击two的时候就会起泡触发one单击的事件。...单机tree时，会同时触发two，然后触发one 2.如果在click事件中，在你要处理的事件之前加上e.preventDefault(); 那么就取消了行为（通俗理解：相当于做了个return操作）
javascript 的事件捕获和事件冒泡之前一直没能弄明白，知道看到一个例子。...利用丢一颗石头入水的例子，就能够非常形象了，如图所示： 事件捕获和事件冒泡就像是一颗石头(点击事件)投入水中： 首先是最外层水面(html)接触(捕获)石头，然后石头下沉，内层的水(body/dom...当石头到达池塘底部(事件被捕获)之后，产生了一个气泡，然后就开始了冒泡阶段 由底部（目标元素）产生的气泡，由内而外，不断向上冒泡，直到最外面（html标签）结束。...点击可查看示例 去示例中试一试便清楚了~ 处理事件 理解了事件的捕获和冒泡机制，对于事件处理就好办了。...，比如是在‘石头’下沉或者‘气泡’冒泡的过程中使之突然消失 事件代理： 从上面事件机制可以看出，如果没有外部干扰，在子节点上触发的事件，在捕获和冒泡最终都会经过父节点 因此，我们可以将事件处理函数绑定在父节点上面
什么是JS事件冒泡？...这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。 事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。...，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转） 2.return false; 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转） 还有一种有冒泡有关的...会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度 它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）...友情提示:事件冒泡不一定是个坏的东西，有些情况会让不同层次捕获不同的事件！
什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播...事件冒泡的作用 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...事件冒泡的示例 编写三个嵌套的div，同时绑定click事件，来演示事件冒泡。 ?...事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止 阻止上面点击黄色div的click()冒泡传递 ?...设置了阻止冒泡传递之后，那么click()事件就不会传递到father和grandfather的事件，所以只有一个alert()弹出。 完整事件冒泡示例代码 <!
事件流、事件捕获和事件冒泡的介绍 最近有用到对应的场景，下班了特地来整理下响应的概念，巩固下知识。 我们在点击页面时，事件发生时会在各元素节点按照一定的顺序进行传播，这种传播过程就称作事件流。...事件流分为三个阶段： 1、事件捕获阶段 事件从window发出，不断向子元素寻找对应的目标节点 2、事件目标阶段 事件找到了对应的目标节点，即此时再往下已经没有对应的节点 3、事件冒泡阶段 事件从节点位置网上回溯到文档的根节点...我们在使用给dom添加事件时一般使用addEventListener方法，该方法传入三个参数 1、对应的事件名称如：click 2、函数：触发对应的交互响应后执行的函数 3、userCapture：指定事件是在捕获还是冒泡阶段执行...:26 btn 事件捕获 test.html:23 btn 事件冒泡1 test.html:29 btn 事件冒泡2 test.html:34 container 事件冒泡 test.html:15 body...事件冒泡 可以看到，都是先触发捕获再触发冒泡事件，先从body（上）到btn（下），再从btn（下）到body（上）。
在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。...否则，我们需要使用IE的方式来取消事件冒泡 7 window.event.cancelBubble = true; 8 return false; 2.阻止浏览器的默认行为 JavaScript代码...return false; } 但是在使用return false时必须注意： 1、jQuery有自己的事件处理层，也对处理程序做了封装，如果事件处理程序返回false，事件冒泡和浏览器默认事件都会被阻止...2、使用原生javaScript，在事件处理程序中返回false只会阻止浏览器默认行为，而事件冒泡依然存在。 3、浏览器默认行为和事件冒泡是相互独立的。阻止事件冒泡不会影响默认行为，反之亦然。...事件处理程序中无法取消的。
事件具有冒泡流和捕获流，两者刚好是反着来。 JavaScript原声监听事件addEventListener，接收两个参数，一个是方法，一个是布尔值，指定事件是否在捕获或冒泡阶段执行。...所以我们可以很直观的打印输出事件的冒泡和捕获两个过程。 ? 输出顺序是body 捕获、test 捕获、test 冒泡、body 冒泡。...当我们增加了目标函数的点击事件，那么事件就不会遵守先发生捕获后再发生冒泡这一规则 ?...stopPropagation既可以阻止事件的捕获还能阻止事件的冒泡，如果我在test冒泡阻止了事件的冒泡，那么就不会输出body冒泡。...对于事件，在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分，但是由于事件冒泡被所有主流的浏览器兼容，从兼容性角度来说还是建议大家使用事件冒泡模型。这就是事件的捕获、冒泡、委托。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
