摘要:在觸發上的某個事件時,會產生一個事件對象。中的事件對象兼容的瀏覽器會將一個對象傳入到事件處理程序中。返回布爾值,指示事件是否可擁可取消的默認動作。立即停止事件在層次中的傳播,即取消進一步的事件捕獲或冒泡。
在觸發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,在那里事件才能得到處理。
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;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()來取消其默認行為。
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 clickedeventPhase
該屬性用來確定事件當前正位于事件流的哪個階段。
如果是捕獲階段則等于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 冒泡階段
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78475.html
摘要:事件流級事件規定的事件流包括三個階段事件捕獲階段處于目標階段和事件冒泡階段。事件處理程序的名字以開頭,如等。如使用級方法指定的事件處理程序被認為是元素的方法。 事件流 事件流描述的是從頁面中接收事件的順序。IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕獲流。 事件冒泡 即事件開始時由最具體的元素接收,然后逐級向上傳播到較為不具體的節點。如: ...
DOM中的事件模擬 三個步驟: 首先通過document.createEvent()方法創建event對象,接收一個參數,即表示要創建的事件類型的字符串: UIEvents(DOM3中的UIEvent)鼠標和鍵盤事件; MouseEvents(DOM3中的MouseEvent)鼠標事件; MutationEvents(DOM3中的MutationEvent)變動事件; HTMLEvents(沒有...
摘要:對象不包含任何信息事件事件,該事件已被移除,應該使用事件但是事件仍然是實驗性的事件,目前有部分瀏覽器暫時不支持。每個觸摸事件的對象都提供了在鼠標事件中常見的屬性。 設備事件 orientationchange事件 該事件的window.orientation屬性中包含3個值:0表示肖像模式、90表示左旋轉的橫向模式、-90表示右旋轉的橫向模式。event對象不包含任何信息: wind...
摘要:因為該事件屬于鼠標事件,所以其事件對象中包含與光標位置有關的所有屬性。事件和屬性該事件在頁面顯示時觸發,雖然這個事件的目標是,但是必須將其事件處理程序添加到。事件該事件以便在的參數列表及中號后面的所有字符串發生變化時通知開發人員。 contextmenu事件 該事件用以表示何時應該顯示上下文菜單,以便開發者取消默認的上下文菜單,轉而提供自定義的菜單。 因為該事件屬于鼠標事件,所以其事...
閱讀 1076·2021-11-22 14:56
閱讀 1520·2019-08-30 15:55
閱讀 3359·2019-08-30 15:45
閱讀 1655·2019-08-30 13:03
閱讀 2868·2019-08-29 18:47
閱讀 3334·2019-08-29 11:09
閱讀 2641·2019-08-26 18:36
閱讀 2615·2019-08-26 13:55