JavaScript事件冒泡和事件捕捉

我们知道html页面是dom树形结构,有层级关系,而我们在dom节点上触发的事件,是会向上或者向下传递的。

从外层向内传递叫事件捕获,从内向外传递叫事件冒泡

js事件捕获和冒泡

1.W3C标准浏览器-为页面元素添加事件

W3C添加时间的标准方法是element.addEventListener(event, somefunciton, useCapture)

这里必须要注意,如果你多次调用addEventListener此方法,会在元素上添加多个函数的,而不是覆盖已绑定的函数

useCapture 参数可选,默认false表示事件冒泡

1.1 事件冒泡

如下图所示事件冒泡,会先执行内层元素的方法

js事件冒泡

1.2 事件捕获

事件捕获,会先执行外层元素的方法

js事件捕获

1.3 完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<html>
<body>
<div id="outer">
<p>外部</p>
<div id="inner">内部</div>
</div>
<script >
var outer = document.getElementById('outer')
outer.addEventListener('click', function () {
alert("outer");
},true)
var inner = document.getElementById('inner')
inner.addEventListener('click',function () {
alert("inner");
},true)
</script>
</body>
</html>

1.4 阻止时间传递

W3C标准浏览器中,event.stopPropagation 方法可以阻止事件传递,如下,

1
2
3
4
5
var inner = document.getElementById('inner')
inner.addEventListener('click',function (ev) {
alert("inner");
ev.stopPropagation();
},true)

2. 非W3C标准添加事件绑定

以 click 事件举例

2.1 element.onclick

element.onclick= somefunciton
如果元素上已绑定了事件,再次对onclick进行赋值,会覆盖原来的绑定的函数

此方式绑定事件,采用的是冒泡方式

2.2 IE8及一下使用ele.attachEvent()

ele.attachEvent("onclick", somefunciton);

IE低版本只支持事件冒泡方式


参考文档

http://www.jb51.net/article/42492.htm

http://www.runoob.com/jsref/met-element-addeventlistener.html