在觸發(fā)DOM上的某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對(duì)象event。
DOM中的事件對(duì)象
兼容DOM的瀏覽器會(huì)將一個(gè)event對(duì)象傳入到事件處理程序中。event對(duì)象包含與創(chuàng)建它的特定事件有關(guān)的屬性和方法。除法的事件類(lèi)型不一樣，可用的屬性方法就不一樣。不過(guò)，所有的事件都會(huì)有下表列出的成員。
下面列出了 2 級(jí) DOM 事件標(biāo)準(zhǔn)定義的屬性：
下面列出了 2 級(jí) DOM 事件標(biāo)準(zhǔn)定義的方法。IE 的事件模型不支持這些方法：
this、target、currentTarget
在事件處理程序的內(nèi)部，對(duì)象this始終等于currentTarget的值，而target則只包含事件的實(shí)際目標(biāo)。如果直接將事件處理程序指定給了目標(biāo)元素，則this、currentTarget和target包含相同的值。如：
var btn = document.querySelector("#btn");btn.onclick=function () { console.log(event.currentTarget === this); //true console.log(event.target === this); //true}由于click事件的目標(biāo)是btn按鈕，所以這三個(gè)值是相等的。如果事件處理程序在按鈕的父節(jié)點(diǎn)（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 因?yàn)閎tn沒(méi)有注冊(cè)事件處理程序，所以該click事件就冒泡到了document.body}在這里，this和currentTarget都是document.body，因?yàn)槭录幚沓绦蚴亲?cè)到這個(gè)元素上的。但是target元素卻等于按鈕元素，因?yàn)樗莄lick事件的真正目標(biāo)。由于按鈕并沒(méi)有注冊(cè)事件處理程序，結(jié)果click事件就冒泡到了document.body，在那里事件才能得到處理。
type
在需要通過(guò)一個(gè)函數(shù)處理多個(gè)事件時(shí)，可以使用type屬性。如：
//獲取按鈕var btn = document.querySelector("#btn");//設(shè)置多個(gè)事件var handler = function() {//檢測(cè)事件的類(lèi)型 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()要阻止特定事件的默認(rèn)行為，可以使用該方法。如：
var aTags = document.getElementsByTagName("a");for (var i = 0; i < aTags.length; i++) { var currentATag = aTags[i]; currentATag.onclick = function() { event.preventDefault(); }};以上代碼即屏蔽了網(wǎng)頁(yè)上全部的a標(biāo)簽超鏈接功能。要注意的是，只有cancelable屬性設(shè)置為true的事件，才可以使用preventDefault()來(lái)取消其默認(rèn)行為。
stopPropagation()
立即停止事件在DOM層次中的傳播，即取消進(jìn)一步的事件捕獲或冒泡。例如，直接添加到一個(gè)按鈕的事件處理程序可以調(diào)用該方法，從而避免觸發(fā)注冊(cè)在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 clickedeventPhase
該屬性用來(lái)確定事件當(dāng)前正位于事件流的哪個(gè)階段。
1、如果是捕獲階段則等于1；
2、如果是目標(biāo)對(duì)象階段則等于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);} //目標(biāo)對(duì)象階段，實(shí)際上屬于冒泡階段（在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 目標(biāo)對(duì)象階段 --> document.body 冒泡階段
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
