JS-阻止冒泡事件与事件委托

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。

1标准写法：利用事件对象里面的 stopPropagation()方法

estopPropagation()

2非标准写法：IE 6-8 利用事件对象 cancelBubble 属性

ecancelBubble = true;

事件委托也称为事件代理， 在 jQuery 里面称为事件委派。 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

如：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器，这里只 *** 作了一次 DOM ，提高了程序的性能。

事实上stoppropagation和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。

不同之处在于stoppropagation属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器中已经支持。

语法：estopPropagation();

参数e：表示事件传递的参数，代表事件的状态。

[html] view plain copy

阻止事件冒泡stopPropagation的兼容写法

cancelBubble 检测是否接受上层元素的事件的控制。

事件捕获其实有三种方式，事件冒泡只是其中的一种：

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。

事件捕获方式在不同浏览器，甚至同种浏览器的不同版本中是有所区别的。如Netscape40采用捕获型事件解决方案，其它多数浏览器则支持冒泡型事件解决方案，另外DOM事件流还支持文本节点事件冒泡。

事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。在IE6中HTML是接收事件冒泡的，另外大部分浏览器将冒泡延续到window对象，即……body→documen→window。

阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据，这种行为无须我们写程序定制。

很多朋友私聊问我怎么阻止事件冒泡，不懂事件冒泡和事件捕捉的童鞋看过来了，我今天就来给大家讲解一下。

我们先来简单看一下原理

这是事件冒泡，一共会d出三次

第一个会d出 a

第二个会d出 b

第三个会d出 c

这样就可以阻止事件冒泡

会d出两次

第一个会d出 a

第二个会d出 b

阻止了 c 的d出

这是事件捕捉，一共会d出三次

第一个会d出 c

第二个会d出 b

第三个会d出 a

如果true和false共存的话，就会先执行true后执行false

这样就可以阻止事件捕获

会d出两次

第一个会d出 c

第二个会d出 b

阻止了 a 的d出

以上就是关于JS-阻止冒泡事件与事件委托全部的内容，包括:JS-阻止冒泡事件与事件委托、stoppropagation、cancelBubble区别(阻止冒泡)、事件冒泡（阻止冒泡）和事件捕捉（阻止捕获）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！