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

jQuery 是一个 JavaScript 库,jQuery 极大地简化了 JavaScript 编程,在有关jq的描述中,jq是兼容现有的主流浏览器,好比谷歌、火狐,safari等(固然是指较新的版本)。在使用jq和js的时候出了很多兼容性问题,也有多是我对二者的了解有限形成的,仍是先理清楚二者的事件。html

一、  DOM的事件捕获和事件冒泡—js支持冒泡和捕获,jq只支持冒泡编程

提及事件的捕获和冒泡就要追溯到网景与微软的“浏览器大战”,不事后来,W3C的规范要求浏览器同时支持捕获和冒泡机制,并容许开发人员选择把事件注册到哪一个阶段。咱们这个阶段只要了解怎么用就能够了。浏览器

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

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

咱们经常使用的模式是事件冒泡。blog

冒泡模式在使用某些事件(如mouseout)的时候有反作用(jq有解决),而某些浏览器并不支持捕获模式,jq不支持事件捕获。须要使用捕获模式只能用jsseo

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

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

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

至于冒泡和捕获触发的顺序,应该是先冒泡再捕获,本身能够写个监听器测试一下。

 

参考:

http://www.javashuo.com/article/p-ykxjnqis-bd.html

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

相关文章
相关标签/搜索