阻止冒泡 | 易学教程

一个DOM元素绑定多个事件时，先执行冒泡还是捕获

阅读更多关于一个DOM元素绑定多个事件时，先执行冒泡还是捕获

问题引入：一个DOM元素绑定两个事件，一个冒泡，一个捕获，则事件会执行多少次，执行顺序如何。这次不卖关思了，直接给你个答案。不理解你就继续往下看。绑定在被点击元素的事件是按照代码顺序发生，其他元素通过冒泡或者捕获“感知”的事件，按照W3C的标准，先发生捕获事件，后发生冒泡事件。所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件。 addEventListener参数 element.addEventListener( type , function , useCapture ) //【事件类型】，【事件处理程序】，【可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 true ：事件句柄在捕获阶段执行； false ：默认。事件句柄在冒泡阶段执行】 1.冒泡冒泡是从下向上，DOM元素绑定的事件被触发时，此时该元素为目标元素，目标元素执行后，它的的祖元素绑定的事件会向上顺序执行。如下代码所示，四个嵌套的div： addEventListener函数的第三个参数设置为false说明不为捕获事件，即为冒泡事件。 < div id = 'one' > < div id = 'two' > < div id = 'three' > < div id = 'four' > </ div > </ div > </ div > </ div

事件流、事件冒泡、事件捕捉、事件委托

阅读更多关于事件流、事件冒泡、事件捕捉、事件委托

事件流当我们触发一个dom事件( e.g: click )，都会进行一次事件对象传播的过程，传播节点包括事件源和它上面的所有祖先节点，用于告知这些节点一次事件的发生。发送事件对象之前，需要先确定此次的传播路径，这是一个有序的dom节点的列表，列表最后一个节点是事件源，列表的前面都是事件源的祖先节点。确定路径后，一次传播会经过三个阶段：捕获阶段、目标阶段、冒泡阶段。如果某个节点不支持某个阶段，或者传播已结束都不会触发相应的事件监听函数。可参考下面的图片：捕获阶段：事件对象从window传播到事件源的父级节点。目标阶段：事件对象到达事件对象的事件源。冒泡阶段：和捕获阶段相反，事件对象从父级节点传播到window。如果你在事件传播中的某个节点调用了 evt.stopPropagation ，则会阻止后续的传播过程。概念我们常讲的事件冒泡和事件捕捉就是上面的捕获阶段和冒泡阶段。事件委托则是利用了事件冒泡的原理控制多个元素的事件处理，在下方通过实例讲解。既然我们知道了事件传播的三个阶段，那每个dom元素的事件触发应该在那个阶段呢？这是在你注册事件的时候决定的，通过 addEventListener 方法的第三个参数 useCapture ，默认为false，则在冒泡阶段触发事件，设置为true则在捕获阶段触发，但是对于事件源（触发事件的元素）来说

事件捕获和事件冒泡（如何改变监听事件触发的时机）

阅读更多关于事件捕获和事件冒泡（如何改变监听事件触发的时机）

<html> <body> <div class="container"> <div class="box"></div> </div> <script> document.getElementsByClassName("container")[0].addEventListener("click", function () { alert("container") }, true); document.getElementsByClassName("box")[0].stopPropagation(); </script> </body> </html> 场景：当点击box元素的时候，还是会触发alert("container")事件。先来理解弄清楚2个名词，”事件捕获“ 和 “事件冒泡”，如下：事件捕获：window -> document -> html -> body -> 父元素 -> 目标元素事件冒泡：目标元素 -> 父元素 -> body -> html -> document -> window stopPropagation()阻止事件冒泡，但是我们在addEventListener()事件监听的时候，增加了第三个参数 true ，该参数会改变监听事件触发的时机，由冒泡触发改为捕获触发；所以，当我们点击box元素的时候，事件往目标元素开始捕获

angularJS如何处理事件冒泡

阅读更多关于 angularJS如何处理事件冒泡

事件冒泡和事件捕捉一直以来都是被讨论的话题，也许大家平时在工作中没有遇到过需要解决事件冒泡的情况举个栗子： <body ng-click="fun1()"> <div ng-click="fun2()"> <img ng-click="fun3()" src="xxx.png"/> </div> </body> 从以上的代码中的fun1(),fun2()和fun3()我们可以看出，当我们点击了<img/>标签中的ng-click事件，触发fun3()方法，但是根据文档对象模型的特征，我们虽然只想触发fun3()方法，事件一直向上一层进行冒泡，fun2()和fun1()也会随后执行此时，为了达到只执行fun3()方法的效果，我们要要在fun3()中写入组织事件冒泡的代码在这里着重讲一下angularJs中是如何实现阻止事件冒泡的当我们在一个标签上使用了controller中写好的方法时 <div fun1($event)></div> angularJS中的执行方法会自带一个$event，这个$event是当前事件的对象，我们直接对这个事件对象进行操作就可以达到阻止事件冒泡的效果 $scope.fun1=function($event){ $event.stopPropagation(); //stopPropagation是目前最常用也是最标准的解决事件冒泡的方法 /

JS中的事件冒泡和事件捕获

阅读更多关于 JS中的事件冒泡和事件捕获

谈起 JavaScript的事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标 (target)。事件冒泡阶段：事件从事件目标 (target)开始，往上冒泡直到页面的最上一级标签。 1、冒泡事件：事件按照从最特定的事件目标到最不特定的事件目标 (document对象)的顺序触发。通俗来讲就是，就是当设定了多个 div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作，但是父 div的onclick事件同样会被触发。 html: <div> <input type="button" value="测试事件冒泡" /> </div> js: var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("body")[0]; $input.onclick = function(e){ this.style.border =

js 事件冒泡和事件捕获

阅读更多关于 js 事件冒泡和事件捕获

一块：事件流描述的是从页面接收事件的顺序。 IE的事件是冒泡事件流，而firefox的事件流是捕获事件流。 1.事件冒泡 IE的事件流叫做事件冒泡，即事件从最具体的元素到不具体的元素。好比气泡从水底下一直向上冒泡，像dom树一样，一直到根元素。 2.事件捕获即从不具体的元素到具体的元素事件传递有两种方式：冒泡与捕获。事件传递定义了元素事件触发的顺序。如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发，然后再触发 <p> 元素的点击事件。第一种：事件冒泡　　　IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点，看一下以下示例：接下来我们点击一下页面上的p元素，看看会发生什么：正如上面我们所说的，它会从一个最具体的的元素接收，然后逐级向上传播， p=>button=>div=>body..........事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。第二种：事件捕获

冒泡事件和捕获事件以及阻止冒泡和捕获方法的详解

阅读更多关于冒泡事件和捕获事件以及阻止冒泡和捕获方法的详解

(1)相关概念事件流的概念：事件流所描述的就是从页面中接受事件的顺序。事件流也有两种，分别是事件冒泡和事件捕获，现行的主流是事件冒泡。以上就是通过原生js将每一个div都绑定了一个事件，且通过useCapture这个参数将事件类型设置为true(捕获）或者 false(默认为false,冒泡）需要注意的是：更改事件流的属性，只能通过原生js中的方法，因为只有原生js中有更改事件流属性的参数，其它没有。jquery的事件流是冒泡型的，里面的事件都是冒泡型的，没法更改事件流的属性，因为方法中没有更改事件流的参数。冒泡事件定义：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。事件委托机制：由冒泡事件衍生出的事件委托机制,既然事件是冒泡传递的，那可以让某个父节点统一处理事件，通过判断事件的发生地（即事件产生的节点），然后做出相应的处理。就是将子元素的事件处理程序绑定到父类上，例如常见的ul>li> a列表标签的写法应用。此处给出一个委托机制的例子：源程序： <ul> <li

jQuery的事件绑定与事件委托

阅读更多关于 jQuery的事件绑定与事件委托

在用jQuery的事件绑定时，会用到on()、bind()、live()、 delegate()这几个方法，但对他们的区别缺从未注意过，现稍总结一下，如有错误，欢迎指正。参考文档： http://blog.csdn.net/xxd851116/article/details/8646899 http://www.jb51.net/article/57827.htm http://www.jb51.net/article/67166.htm http://api.jquery.com/on/ http://api.jquery.com/delegate/ http://api.jquery.com/bind/ http://api.jquery.com/live/ http://www.cnblogs.com/aaronjs/p/3481075.html http://blog.jquery.com/2016/05/20/jquery-1-12-4-and-2-2-4-released/ http://blog.jquery.com/2016/06/09/jquery-3-0-final-released/ DOM树我们先种一颗DOM树，来说明接下来将要讲到的事件冒泡，图片引用自： http://blog.csdn.net/xxd851116/article/details

什么是事件委托？

阅读更多关于什么是事件委托？

什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件原理: 利用冒泡的原理，把事件加到父级上，触发执行效果。 target 事件属性可返回事件的目标节点（触发该事件的节点） // Firefox/Chrome/Opera/Safari srcElement 事件属性可返回事件的目标节点（触发该事件的节点）// ie 兼容问题： oUl . onmouseover = function ( ev ) { var ev = ev || window . event ; var target = ev . target || ev . srcElement ; if ( target . nodeeName . toLowerCase ( ) == "li" ) { target . style . background = "red" ; } } DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话

js 事件冒泡与阻止冒泡、事件委托

阅读更多关于 js 事件冒泡与阻止冒泡、事件委托

一.定义事件冒泡：IE的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。事件捕获：事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件委托：事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。二. 关于事件冒泡与阻止事件冒泡的用法： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>JS事件基础</title> <style> div{ padding: 100px; } #div2{ width: 400px; height:300px; background: #ccc; display: none; } </style> <script type="text/javascript"> window.οnlοad=function(){ var oBtn=document.getElementById('btn'); var oDiv=document.getElementById('div2'); oBtn.οnclick=function(ev){ alert("我是按钮啊！"); ev.cancelBubble

订阅阻止冒泡