您的位置：首页 > Web前端 > JavaScript

javascript - 【事件冒泡】和【事件捕获】

2015-07-27 09:38 387 查看

冒泡型事件

微软提出的名为事件冒泡(event
bubbling)的事件流。事件会从最内层的元素开始发生，一直向上传播，直到document对象。事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

捕获型事件

与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

DOM事件流

同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

支持W3C标准的浏览器在添加事件时用

addEventListener(event,fn,useCapture);

第一个参数是需要绑定的事件

第二个参数是触发事件后要执行的函数

而第三个参数默认值是false，表示在事件冒泡的阶段调用事件处理函数，如果参数为true，则表示在事件捕获阶段调用处理函数。

<html>
<body>
<ul id="layer_1">
<li id="layer_2">
<p id="layer_3">
<a id="layer_4">
Click_Me!
</a>
</p>
</li>
</ul>
<script>
var num1 = document.getElementById("layer_1");
var num2 = document.getElementById("layer_2");
var num3 = document.getElementById("layer_3");
var num4 = document.getElementById("layer_4");
num1.addEventListener("click",function(){alert("1");},false);//当第三个参数为false时，冒泡执行处理事件
num2.addEventListener("click",function(){alert("2");},false);
num3.addEventListener("click",function(){alert("3");},false);
num4.addEventListener("click",function(){alert("4");},false);
</script>
</body>
</html>执行结果为：4->3->2->1.
当false改为true
,执行结果正好相反：1->2->3->4.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航