JavaScript事件對象深入詳解

第JavaScript事件對象深入詳解在事件處理程序內(nèi)部，this始終等于currentTarget，而target等于事件的實際目標(biāo)。如果直接將事件處理程序指定給目標(biāo)元素，那么這三個值相等：

scripttype="text/javascript"

varbtn=document.getElementById("myBtn");

btn.onclick=function(event){

console.log(event.currentTarget===this);//true

console.log(event.target===this);//true

/script

如果事件處理程序指定到按鈕的父節(jié)點上，那么它們是不同的：

scripttype="text/javascript"

document.body.onclick=function(event){

console.log(event.currentTarget===document.body);//true

console.log(this===document.body);//true

console.log(event.target===document.getElementById("myBtn"));//true

/script

如果需要通過一個函數(shù)來處理多個事件，那么可以使用type屬性：

scripttype="text/javascript"

varbtn=document.getElementById("myBtn");

varhandler=function(event){

switch(event.type){

case"click":

console.log("Clicked");

break;

case"mouseover":

event.target.style.backgroundColor="red";

break;

case"mouseout":

event.target.style.backgroundColor="";

break;

btn.onclick=handler;

btn.onmouseover=handler;

btn.onmouseout=handler;

/script

使用preventDefault()方法來阻止特定事件的默認(rèn)行為：

aid="myLink"href="163.com"rel="externalnofollow"rel="externalnofollow"點我/a

scripttype="text/javascript"

varlink=document.getElementById("myLink");

link.onclick=function(event){

event.preventDefault();

/script

注意：只有cancelable屬性值為true的事件，才可以使用preventDefault()阻止特定事件的默認(rèn)行為！

stopPropagation()會立即阻止事件在DOM層次的傳播。比如這里在按鈕事件中調(diào)用stopPropagation()，來避免觸發(fā)注冊在document.body上的事件處理程序：

scripttype="text/javascript"

varbtn=document.getElementById("myBtn");

btn.onclick=function(event){

console.log("Clicked");

event.stopPropagation();

document.body.onclick=function(event){

console.log("Bodyclicked");

/script

eventPhase屬性，可以確定事件當(dāng)前正處于事件流的哪一個階段：

scripttype="text/javascript"

varbtn=document.getElementById("myBtn");

btn.onclick=function(event){

console.log(event.eventPhase);//2

document.body.addEventListener("click",function(event){

console.log(event.eventPhase);//1

},true);//true表示捕獲階段

document.body.onclick=function(event){

console.log(event.eventPhase);//3

/script

注意：只有在事件處理程序執(zhí)行期間，event對象才會存在；一旦事件處理程序執(zhí)行結(jié)束，event對象就會被銷毀！

2IE中的事件對象

在使用DOM0級方法添加事件處理程序時，event對象是作為window對象的一個屬性存在：

varbtn=document.getElementById("myBtn");

btn.onclick=function(){

varevent=window.event;

console.log(event.type);//"click"

如果是通