理解JavaScript事件對象，javascript事件對象

理解JavaScript事件對象，javascript事件對象

在觸發DOM上的某個事件時，會產生一個事件對象event。

DOM中的事件對象

相容DOM的瀏覽器會將一個event對象傳入到事件處理常式中。event對象包含與建立它的特定事件有關的屬性和方法。除法的事件類型不一樣，可用的屬性方法就不一樣。不過，所有的事件都會有下表列出的成員。

下面列出了 2 級 DOM 事件標準定義的屬性：

• bubbles: 返回布爾值，指示事件是否是起泡事件類型。
  
• cancelable: 返回布爾值，指示事件是否可擁可取消的預設動作。
  
• currentTarget: 返回其事件監聽器觸發該事件的元素。
  
• eventPhase: 返回事件傳播的當前階段。
  
• target: 返回觸發此事件的元素（事件的目標節點）。
  
• timeStamp: 返回事件產生的日期和時間。
  
• type: 返回當前 Event 對象表示的事件的名稱。
  

下面列出了 2 級 DOM 事件標準定義的方法。IE 的事件模型不支援這些方法：

• initEvent(): 初始化新建立的 Event 對象的屬性。
• preventDefault(): 通知瀏覽器不要執行與事件關聯的預設動作。
• stopPropagation(): 不再派發事件。

this、target、currentTarget

在事件處理常式的內部，對象this始終等於currentTarget的值，而target則只包含事件的實際目標。如果直接將事件處理常式指定給了目標元素，則this、currentTarget和target包含相同的值。如：

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

由於click事件的目標是btn按鈕，所以這三個值是相等的。如果事件處理常式在按鈕的父節點（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事件的真正目標。由於按鈕並沒有註冊事件處理常式，結果click事件就冒泡到了document.body，在那裡事件才能得到處理。

1、type

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

//擷取按鈕var btn = document.querySelector("#btn");//設定多個事件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;  }}//給響應的事件賦值btn.onclick = handler;btn.onmouseover = handler;btn.onmouseout = handler;

2、preventDefault()

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

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

以上代碼即屏蔽了網頁上全部的a標籤超連結功能。要注意的是，只有cancelable屬性設定為true的事件，才可以使用preventDefault()來取消其預設行為。

3、stopPropagation()

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

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

又如：

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

eventPhase

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

• 如果是捕獲階段則等於1；
  
• 如果是目標對象階段則等於2；
  
• 如果是冒泡階段則等於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 冒泡階段

以上就是關於JavaScript事件對象，希望對大家的學習有所協助。

您可能感興趣的文章:

• Javascript拖拽&拖放系列文章3之細說事件對象
• JavaScript 事件對象的實現
• JavaScript 擷取事件對象的注意點
• js 事件對象 滑鼠滾輪效果示範說明
• javascript 事件對象 座標事件說明
• Js擷取事件對象代碼
• JS的Event事件對象使用方法
• js中擷取事件對象的方法小結