JavaScript事件对象
本文介绍了JavaScript事件对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
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 到底有什么不一样？
解决方案
直接一个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>这篇关于JavaScript事件对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
