DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於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事件對象,希望對大家的學習有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved