在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
event对象包含与创建它的特定事件有关的属性和方法,触发的事件类型不一样,可用的实行和方法也不一样。
属性/方法 类型 读/写 说明
currentTarget Element 只读 其事件处理程序当前正在处理事件的那个元素
target Element 只读 事件的目标
在事件处理程序的内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this、currentTarget和target包含相同的值。来看下面的例子:
var btn=document.getElementsById("myBtn");
btn.onclick=function(event){
alert(event.currentTarget===this) ; //true
alert(event.target===this); //true
}
这个例子检测了currentTarget和target与this的值。由于click事件的目标是按钮,因此这三个值是相等的。如果事件处理程序存在于按钮的父节点(此处,按钮的父节点便是body)中,那么这些值是不相同的。再看下面的例子。
document.body.onclick=function(event){
alert(event.currentTarget===document.body); //true
alert(this===document.body); //true
alert(event.target===document.getElementsById("myBtn")); //true
}
当单击这个例子中的按钮时,this和currentTarget都等于document.body,以为事件处理程序时注册到这个元素上的。然而,target元素却等于按钮元素,因为他是click事件真正的目标。由于按钮上并没有注册事件处理程序,结果click事件就被冒泡到document.body,在那里事件才得到了处理。
关于这里的理解可以举二个例子说明:
一、当点击"mybtn"按钮时,会输出true true true true true; 自己本身单击会输出两个true然后冒泡到父元素又会输出三个true;
二、当点击"mybtn"按钮的父元素除去其之外的任意一处都会输出 true true false;
原文:http://www.cnblogs.com/qqqiangqiang/p/4916848.html