JavaScript 事件模型与监听机制详解：冒泡、捕获及 IE 与 DOM 兼容实现

JavaScript 事件模型与监听机制详解：冒泡、捕获及 IE 与 DOM 兼容实现

A 事件流（event flow ）

在 JavaScript 中，事件模型主要包含两种类型：冒泡型事件（bubbling）和捕获型事件（capturing）。

冒泡型事件（bubbling）：指事件触发顺序是从最具体的目标对象开始，逐级向上传递至最不精确的祖先对象。

捕获型事件（event capturing）：与冒泡型相反，其触发顺序是从最不精确的祖先对象开始，逐级向下传递至最具体的目标对象。

捕获型事件模型也被称为自顶向下（DOM 层次）的事件模型。

由于早期 IE 浏览器不支持捕获型事件，因此该模型在实际开发中应用较少。

B 事件监听

i > 通用监听方法

示例一：

 
<p onclick="alert('点击了');">Click Me</p>

示例二：

 
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
// 在onload 事件中添加所有标签的事件
window.onload = function(){
// 找到对象
var o_p = document.getElementById("myp");
// 添加对象的onclick 事件
o_p.onclick = function(){
alert("我被点击了");
} 
} 
</script>
</head>
<body>
<p id="myp">Click Me</p>
</body>
</html>

此代码实现了结构与行为的分离。

IE 与标准 DOM 事件监听方法对比

为浏览器添加监听方法主要分为两类：IE 特有的监听方法和标准 DOM 的监听方法。

ii > IE 中的监听方法

在 IE 浏览器中，每个元素提供两个用于处理事件监听的方法：attachEvent() 和 detachEvent()。

附加事件方法：[object].attachEvent(“事件名”，方法名);

分离事件方法：[object].detachEvent(“事件名”，方法名);

如：o_p.detachEvent("onclick",click_A);

示例：

 
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
<!-- 
function click_A(){
alert("click_A");
//删除监听函数
o_p.detachEvent("onclick",click_B);
} 
function click_B(){
alert("click_B, 我只调用一次。");
} 
var o_p;
window.onload = function(){
o_p = document.getElementById("myP");
// 添加监听函数 click_A
o_p.attachEvent("onclick",click_A);
// 添加监听函数 click_B
o_p.attachEvent("onclick",click_B);
} 
//--> 
</script>
</head>
<body>
<p id="myP">Click Me</p>
</body>
</html>

注意：

● 使用这种方式可以为同一元素添加多个监听函数；

● 在 IE 浏览器中，函数的执行顺序与函数的添加顺序相反；

● 在 IE 浏览器中，虽然函数有先后执行顺序，但都会同时调用；

iii > 标准 DOM 的监听方法

在使用标准 DOM 的浏览器中，每个元素同样提供两个用于处理事件监听的方法：addEventListener() 和 removeEventListener()。

添加事件监听方法：[object].addEventListener(“事件名”，方法名，事件模型 );

移除事件监听方法：[object].removeEventListener(“事件名”，方法名，事件模型 );

注意：

这里的“事件名”不能带 on ，如：click（如果是onclick 则错误！）

“事件模型”为 boolean 类型，通常设置为 false ，即“冒泡型”事件。（如果是true 则为“捕获型”事件）

示例：

 
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
<!-- 
function click_A(){
alert("click_A");
//删除监听函数
o_p.removeEventListener("click",click_B,false);
} 
function click_B(){
alert("被click_A删除, 一次都不能调用。");
} 
var o_p;
window.onload = function(){
o_p = document.getElementById("myP");
// 添加监听函数 click_A
o_p.addEventListener("click",click_A,false);
// 添加监听函数 click_B
o_p.addEventListener("click",click_B,false);
} 
//--> 
</script>
</head>
<body>
<p id="myP">Click Me</p>
</body>
</html>

在 Firefox 下运行通过，在 IE 下报错。

注意：

● 使用这种方式同样可以为同一元素添加多个监听函数；

● 在 Firefox 浏览器中，函数的执行顺序与函数的添加顺序一致（Firefox 与 IE 正好相反）；

● 在 Firefox 浏览器中，这种方式添加的函数是执行外一个再执行另一个（逐个执行）；