event对象包含与创建它的特定事件有关的属性和方法。
触发事件的类型不一样,可用的属性和方法也不一样。
下表中列出了通用的属性和方法。
属性/方法 类型 读/写 描述
bubbles Boolean 只读 事件是否冒泡
cancelable Boolean 只读 是否可以取消事件的默认行为
curentTarget Element 只读 当前正在处理事件的事件处理程序的元素
detail Integer 只读 与事件相关的细节信息
eventPhase Integer 只读 调用事件处理程序的阶段:1表示捕获阶段,2表示“处于目标”阶段,3表示冒泡阶段
preventDefault() Function 只读 取消事件的默认行为
stopPropagation() Function 只读 取消事件的进一步捕获或冒泡。如果bubbles为true则可以使用该方法
target Element 只读 事件的目标
type String 只读 被触发事件的类型
view AbstractView 只读 与事件关联的抽象视图。等同于发生事件的window对象
在事件处理程序的内部,对象this始终等于curentTarget的值,target包含的是事件的实际目标。
文中的curentTarget
和 target
到底有什么不一样?
<ul>
<li>
li <span>span</span>
</li>
</ul>
<script type="text/javascript">
document.querySelector('ul').addEventListener('click', function(e){
console.log('target', e.target);
console.log('curentTarget', e.currentTarget);
}, false)
</script>
target
触发的事件的元素,也就是你实际点击的目标 点击span 就是span
,点击li 就是li
curentTarget
当前处理事件元素,示例中永远是ul
直接一个demo,就明白了,target
是说你的事件是由哪个dom
触发的,而curretnTarget
是说触发了哪个dom
上的事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
#test{
width: 400px;
height: 400px;
background-color: blue;
}
#child{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="test">
<div id="child"></div>
</div>
<script type="text/javascript">
document.getElementById("test").onclick = function (e) {
console.log(e.target, e.currentTarget);
};
</script>
</body>
</html>
你用过事件委托就明白什么不同了。
举个例子
var toggleEvent = function(e){
console.log(e.target);
console.log(e.currentTarget);
}
<div onclick = toggleEvent()>
<button>
点我!
</button>
</div>
这个时候target是button,currentTarget是div,因为div是绑定事件的对象
http://stackoverflow.com/ques...
currentTarget是绑定事件的对象,target是触发事件的对象,当然有时候它俩是一样的。
http://bbs.9ria.com/thread-88...