以前看到一个面试题目: 事件处理有几个阶段,分别是什么?
看到这样的题,我当时真的是连题目都看不懂,不就是在DOM上绑定事件,然后触发事件吗?
事件处理三个阶段
假如一个div里面嵌套一个div,而且都绑定了点击事件,那么点击一下内部的div,毫无疑问两个事件都会执行的,但是哪个先执行呢?在以前的时候,不同的浏览器执行顺序是不一样的,网景公司主张外面的先执行,再执行里面的(捕获)。但是微软主张先执行里面的再执行外面的(冒泡)。最后,W3C给出了规范,定义了冒泡和捕获。并且定义了事件处理的三个阶段:
- 捕获
- 目标
- 冒泡
开始理解不对啊,那不是外面的执行了两遍嘛,然而并不是!
ADDEVENTLISTENER
在IE8和IE8以前,IE是只支持冒泡的,比如onclick onhover attachEvent这些都是冒泡绑定事件,但是后来就有了addEventListener,这个函数最大的不同就是有第三个参数来决定是冒泡阶段发生还是捕获阶段发生。
addEventListener(event,handle,capture)
第三个参数是一个布尔值,默认是false,指事件在冒泡阶段发生。设置为true时,事件会在捕获阶段发生。
但是需要注意的一点,在jquery中是没有这种参数的,因为jquery只支持冒泡,所以我们需要在捕获阶段出发事件还是得用js的addEventListener。
但是有时候我们不需要冒泡阶段,也就是我们在某些事件中,不需要向外扩散事件。这时候可以用W3C的标准阻止冒泡方法:
event.stopPropagation();
这个函数在js和jquery中都是通用的。