js学习小结（十二）2014.5.20（事件冒泡以及事件对象）

最新推荐文章于 2025-06-19 18:19:55 发布

原创最新推荐文章于 2025-06-19 18:19:55 发布 · 550 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

63 篇文章

订阅专栏

本文详细探讨了如何使用DOM2级模型注册事件处理程序，通常在事件冒泡阶段进行调用。介绍了HTML元素特性中的事件对象及其获取方式，包括DOM0级和DOM2级中的事件对象区别，并解释了事件对象的属性如type、target、currentTarget等。文章还阐述了事件冒泡与阻止冒泡的概念，并通过实例展示了如何在不同元素层级中捕获事件。最后，讨论了事件处理程序在不同元素上的行为及如何通过EventUtil.stopBubble()方法阻止事件的传播。

根据建议，一般都通过DOM2级模型注册事件处理程序，并且一般都在事件冒泡阶段处理调用事件处理程序。

1.事件对象

（1）HTML元素特性中的事件对象

HTML元素特性中的事件对象直接通过event就可以获取。此外通过HTML特性注册的事件处理程序能够访问document中的任何对象，如果该元素是表单元素，还能直接访问表单中的元素。

<!DOCTYPE html>
<html>
<head>
	<title>HTMLEventHandler</title>
</head>
<body>
<form>
	<input name='username' value=''/>
	<input name='school' value=''/>
	<input type="button" value='getAllvalue' onclick='console.log(username.value+"  "+school.value+" "+this.value)' /><!--直接访问表单中username和school的值-->
</form>
</body>
</html>

（2）DOM0级中的事件对象

element.onclick=function(){}

在只支持IE事件模型中的浏览器中，事件对象通过window.event可以获得。而在其他支持DOM事件模型中直接在事件处理函数中使用event。

（3）DOM2级中的事件对象

element.addEventListener() ;element.attachEvent();

在IE中的事件对象，通过window.event 或者event都可以获得，而其他支持DOM事件模型中直接在事件处理函数中使用event。

2.事件对象的属性（type，target，currentTarget，eventPhase，this）

event.type 返回事件类型

event.target 返回引起事件的元素

event.currentTarget 返回事件处理函数所在的元素，this和currentTarget的值一般相同

this 。在dom0级事件中，this指向的是事件处理函数所在的元素，而在dom2级事件中，使用attachEvent注册的事件处理函数中的this指向的是window。

3.冒泡与阻止冒泡

以一个click事件为例：

<!DOCTYPE html>
<html>
<head>
	<title>DOMEventObject</title>
</head>
<body id='body'>
<div id='div' style='width:600px;height:600px;background-color:red'>

<input type='button' id='but' value="button" />

</div>
<script type="text/javascript" src='../js/JSEvent.js'></script>
<script type="text/javascript">
function handler(event){
	console.log("target:"+event.target.id+" currentTarget:"+event.currentTarget.id+" this:"+this.id);
}
	EventUtil.addEventHandler(document.body,'click',handler);

</script>
</body>
</html>

<pre name="code" class="html">addEventHandler:function(element,eventType,handler){
		if(element.addEventListener){
			element.addEventListener(eventType,handler,false);			
		}
		else if(element.attachEvent){
			element.attachEvent("on"+eventType,handler);		
		}
		else {
			element["on"+eventType]=handler;
			
		}
	}

将事件注册在document.body元素上，当我们点击button时，输出：target:but currentTarget:body this:body

当点击div时，输出：target:div currentTarget:body this:body

当把事件处理程序注册在div上时，

EventUtil.addEventHandler(document.getElementById("div"),'click',handler);

当点击button时输出：target:but currentTarget:div this:div

如果此时给button也增加一个事件处理程序：

<script type="text/javascript">
function handler(event){
	console.log("target:"+event.target.id+" currentTarget:"+event.currentTarget.id+" this:"+this.id+" eventPhase:"+event.eventPhase);
}
	//EventUtil.addEventHandler(document.body,'click',handler);
EventUtil.addEventHandler(document.getElementById("div"),'click',handler);
EventUtil.addEventHandler(document.getElementById("but"),'click',handler);
</script>

点击button的结果：

target:but currentTarget:but this:but eventPhase:2

target:but currentTarget:div this:div eventPhase:3

可以发现事件冒泡到div上，事件阶段为3.

现在修改一下button的处理事件：

<script type="text/javascript">
function handler(event){
	console.log("target:"+event.target.id+" currentTarget:"+event.currentTarget.id+" this:"+this.id+" eventPhase:"+event.eventPhase);
}
function butHandler(event){
	console.log("target:"+event.target.id+" currentTarget:"+event.currentTarget.id+" this:"+this.id+" eventPhase:"+event.eventPhase);
	EventUtil.stopBubble(event);
}
	//EventUtil.addEventHandler(document.body,'click',handler);
}
EventUtil.addEventHandler(document.getElementById("div"),'click',handler);
EventUtil.addEventHandler(document.getElementById("but"),'click',butHandler);
</script>

当再点击button时，结果：

target:but currentTarget:but this:but eventPhase:2

因为此处在button的click事件处理函数中使用

EventUtil.stopBubble(event);阻止了事件的传播，所以div并没有收到click事件。

stopBubble的代码如下：

stopBubble:function(event){
		event.stopPropagation?event.stopPropagation():event.cancelBubble=true;		
	}

因为在ie中，使用cancelBubble属性为true阻止事件的进一步传播，而在dom2中使用stopPropagation方法来阻止事件的冒泡。