1、事件捕获与事件触发是两种不同的事件触发顺序。
2、事件冒泡
事件触发时按照:目标元素(target)向顶级根元素的方向依次触发同类型事件。
div -> body -> html -> document
3、事件捕获
事件触发时按照:根元素(docunment)向目标元素(target)的方向依次触发同类型事件。
document -> html -> body-> div
4、dom模型中的事件
同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,
从document对象开始,也在document对象结束。文本节点也触发事件(在IE中不会)。
事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。
5、假设一个元素div,它有一个下级元素p。
<div>
<p>元素</p>
</div>
这两个元素都绑定了click事件,如果用户点击了p,它在div和p上都触发了click事件,那这两个事件处理程序哪个先执行呢?事件顺序是什么?
两种模型
以前,Netscape和Microsoft是不同的实现方式。
Netscape中,div先触发,这就叫做事件捕获。
Microsoft中,p先触发,这就叫做事件冒泡
程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,
它有三个参数,第三个参数若 是true, 则表示采用事件捕获,若是false,则表示采用事件冒泡。
ele.addEventListener('click',doSomething2,true)
true=捕获
false=冒泡
传统绑定事件方式
在一个支持W3C DOM的浏览器中,像这样一般的绑定事件方式,是采用的事件冒泡方式。
ele.onclick = doSomething2
6、阻止事件冒泡传播:
W3c: stopPropagation();
IE: cancelBubble = true;
7、阻止时间默认行为(form表单的提交、href的点击跳转)
W3c: preventDefault();
IE: window.event.returnValue = false;