var btn = document.querySelector("#btn");
btn.onclick=function () {
 console.log(event.currentTarget === this); //true
 console.log(event.target === this); //true
}

由于click事件的目標是btn按鈕，所以這三個值是相等的。如果事件處理程序在按鈕的父節(jié)點（document.body）中，那么這些值則不相同。如：

var btn = document.querySelector("#btn");
document.body.onclick=function () {
 console.log(event.currentTarget === document.body); //true
 console.log(this === document.body); //true
 console.log(event.target === btn); //true 因為btn沒有注冊事件處理程序，所以該click事件就冒泡到了document.body
}

在這里，this和currentTarget都是document.body，因為事件處理程序是注冊到這個元素上的。但是target元素卻等于按鈕元素，因為它是click事件的真正目標。由于按鈕并沒有注冊事件處理程序，結(jié)果click事件就冒泡到了document.body，在那里事件才能得到處理。

type

在需要通過一個函數(shù)處理多個事件時，可以使用type屬性。如：

//獲取按鈕
var btn = document.querySelector("#btn");
//設(shè)置多個事件
var handler = function() {
//檢測事件的類型
 switch (event.type) {
  case "click":
   console.log("i click it");
   break;
  case "mouseover":
   console.log("i enter it");
   break;
  case "mouseout":
   console.log("i leave it");
   break;
 }
}
//給響應(yīng)的事件賦值
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
preventDefault()

要阻止特定事件的默認行為，可以使用該方法。如：

var aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {
 var currentATag = aTags[i];
 currentATag.onclick = function() {
  event.preventDefault();
 }
};

以上代碼即屏蔽了網(wǎng)頁上全部的a標簽超鏈接功能。要注意的是，只有cancelable屬性設(shè)置為true的事件，才可以使用preventDefault()來取消其默認行為。

stopPropagation()

立即停止事件在DOM層次中的傳播，即取消進一步的事件捕獲或冒泡。例如，直接添加到一個按鈕的事件處理程序可以調(diào)用該方法，從而避免觸發(fā)注冊在document.body上面的事件處理程序。如：

var btn = document.getElementById("btn");
btn.onclick = function () {
 console.log("btn clicked");
 // event.stopPropagation();
};
window.onclick = function () {
 console.log("clicked");
};
//單擊一下的結(jié)果：
//btn clicked
//clicked

又如：

var btn = document.getElementById("btn");
btn.onclick = function () {
 console.log("btn clicked");
 event.stopPropagation();
};
window.onclick = function () {
 console.log("clicked");
};
//單擊一下的結(jié)果：
//btn clicked

eventPhase

該屬性用來確定事件當前正位于事件流的哪個階段。

1、如果是捕獲階段則等于1；
2、如果是目標對象階段則等于2；
3、如果是冒泡階段則等于3；
如：

var btn = document.getElementById("btn");

document.body.addEventListener("click", function() {
 console.log("bodyListener" + event.eventPhase);
}, true) //捕獲階段

btn.onclick = function() {
 console.log("btn" + event.eventPhase);
} //目標對象階段，實際上屬于冒泡階段（在btn上）

document.body.onclick = function() {
 console.log("body" + event.eventPhase);
} //冒泡階段（在body上）

又如：

var btn = document.getElementById("btn");

document.body.addEventListener("click", function() {
 console.log(event.eventPhase); //1
 console.log(event.currentTarget); //HTMLBodyElement
}, true);

btn.addEventListener("click", function() {
 console.log(event.eventPhase); //2
 console.log(event.currentTarget); //HTMLInputElement
});

document.body.addEventListener("click", function() {
 console.log(event.eventPhase); //3
 console.log(event.currentTarget); //HTMLBodyElement
});

流程大概是：

document.body 捕獲階段 --> btn 目標對象階段 --> document.body 冒泡階段

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: