Javascript和jquery事件--事件冒泡和事件捕获

jQuery 是一个 JavaScript 库，jQuery 极大地简化了 JavaScript 编程，在有关jq的描述中，jq是兼容现有的主流浏览器，比如谷歌、火狐，safari等（当然是指较新的版本）。在使用jq和js的时候出了不少兼容性问题，也有可能是我对两者的了解有限造成的，还是先理清楚两者的事件。

1、  DOM的事件捕获和事件冒泡—js支持冒泡和捕获，jq只支持冒泡

说起事件的捕获和冒泡就要追溯到网景与微软的“浏览器大战”，不过后来，W3C的规范要求浏览器同时支持捕获和冒泡机制，并允许开发人员选择把事件注册到哪个阶段。我们这个阶段只要了解怎么用就可以了。

当你触发某个元素的某个事件（如点击）的时候，事实上，这个元素处于它的父元素、body、html之中，你也同时触发了这些元素的事件，而冒泡和捕获两种模式不同的就是事件触发顺序的不同。

根据DOM文档树来说，事件捕获的发生的顺序从文档树的根节点开始，比如点击肉眼可见的某个元素，事件的触发顺序是：html.clcik->body.click->父元素.click->点击的元素.click，而事件冒泡则相反，会从子元素开始，触发顺序是：点击的元素.click ->父元素.click -> body.click -> html.clcik。

我们常用的模式是事件冒泡。

冒泡模式在使用某些事件（如mouseout）的时候有副作用（jq有解决），而某些浏览器并不支持捕获模式，jq不支持事件捕获。需要使用捕获模式只能用js。

事件冒泡的副作用出现在mouseout，即鼠标移出元素的事件。如鼠标移出子元素的时候，如果你不做任何操作，它会继续冒泡，触发父元素的mouseout事件，即使这时候你的鼠标即使还在父元素内也会触发父元素绑定的移出事件。你需要在每一个mouseout事件阻止事件冒泡。但jQuery提供了mouseenter和mouseleave事件作为替代来避免这个副作用。

在jq中使用的都是事件冒泡，而js默认使用的是事件冒泡，但提供了事件捕获的注册。使用：

　　target.addEventListener(type,fn,true/false);//其中最后一个参数默认是false(冒泡模式)，当你设置true就是捕获模式

至于冒泡和捕获触发的顺序，应该是先冒泡再捕获，自己可以写个监听器测试一下。

 

参考：

https://www.cnblogs.com/susanws/p/5430777.html

http://www.ituring.com.cn/article/420?q=jQuery%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有