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

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

2014-05-21 16:28 736 查看

根据建议，一般都通过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)' />
</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方法来阻止事件的冒泡。

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

标签：

相关文章推荐

新的分享

章节导航