DOM 事件的深入淺出（二）
在DOM事件的深入淺出（一）中，我主要給大家講解了不同DOM級別下的事件處理程序，同時介紹了事件冒泡和捕獲的觸發(fā)原理和方法。本文將繼續(xù)介紹DOM事件中的知識點，主要側(cè)重于DOM事件中Event對象的屬性和方法。
那么什么是DOM事件中Event對象呢？事件對象（event object）指的是與特定事件相關(guān)且包含該事件詳細信息的對象。我們可以通過傳遞給事件處理程序的參數(shù)獲取事件觸發(fā)后所產(chǎn)生的一系列方法和屬性。
Event對象
Event對象其實是一個事件處理程序的參數(shù)，當(dāng)調(diào)用事件時，我們只需要將其傳入事件函數(shù)就可以獲取。代碼如下：
function getEvent(event) {
event = event || window.event;
}
上面的事件函數(shù)傳入了一個名叫Event的參數(shù)作為事件對象，同時做了瀏覽器兼容處理。在IE8及以前本版之中，通過設(shè)置屬性注冊事件處理程序時，調(diào)用的時候并未傳遞事件對象，需要通過全局對象window.event來獲取。所以上述代碼中我們利用 || 來做判斷，如果event對象存在則使用event，不存在則使用window.event。
Event對象包含了幾個方法和多個屬性，通過這些方法和屬性我們可以獲取事件的詳細信息并進行相關(guān)處理。
Event對象方法
Event對象主要有以下兩個方法，用于處理事件的傳播（冒泡、捕獲）和事件的取消。
1.stopPropagation
stopPropagation方法主要用于阻止事件的進一步傳播，比如阻止事件繼續(xù)向上層冒泡。
function getEvent(event) {
event.stopPropagation();
}
child.addEventListener('click', getEvent, false);
如果你需要兼容IE8及以下版本瀏覽器，則需要利用cancelBubble來代替stopPropagation，因為低版本IE不支持stopPropagation方法。
function getEvent(event) {
event = event || window.event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
cancelBubble是IE事件對象的一個屬性，設(shè)置這個屬性為true能阻止事件進一步傳播。
2.preventDefault
preventDefault方法用于取消事件的默認操作，比如a鏈接的跳轉(zhuǎn)行為和表單自動提交行為就可以用preventDefault方法來取消。代碼如下：
<a id="go" >禁止跳轉(zhuǎn)</a>
var go = document.getElementById('go');
function goFn(event) {
event.preventDefault();
console.log('我沒有跳轉(zhuǎn)！');
}
go.addEventListener('click', goFn, false);
通過preventDefault，我們成功阻止了a鏈接的跳轉(zhuǎn)行為。不過，在IE9之前的瀏覽器中需要設(shè)置returnValue屬性為false來實現(xiàn)。如下：
function goFn(event) {
event = event || window.event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
console.log('我沒有跳轉(zhuǎn)！');
}
除了以上Event對象的兩個主要方法，當(dāng)前DOM事件規(guī)范草案在Event對象上還定義了另一個方法，命名為stopImmediatePropagation。
3.stopImmediatePropagation
和stopPropagation相比，stopImmediatePropagation同樣可以阻止事件的傳播，不同點在于其還可以把這個元素綁定的同類型事件也阻止了。如：
var go = document.getElementById('go');
function goFn(event) {
event.preventDefault();
event.stopImmediatePropagation(); // 阻止事件冒泡并阻止同類型事件
console.log('我沒有跳轉(zhuǎn)！');
}
function goFn2(event) {
console.log('我是同類型事件！');
}
go.addEventListener('click', goFn, false);
go.addEventListener('click', goFn2, false);
我們在a鏈接上繼續(xù)加了一個點擊事件，如果我們在goFn方法中添加了stopImmediatePropagation方法，那么goFn2方法將不會被執(zhí)行，同時也不會將點擊事件冒泡至上層。
需要注意的是，stopImmediatePropagation目前一部分瀏覽器尚不支持，但是像jQuery這樣的庫封裝了跨平臺的stopImmediatePropagation方法。
Event對象屬性
與Event對象的方法相比，因Event對象的屬性相對較多，文本無法一一講解，所以主要介紹實際項目中常用的Event對象屬性。
1.type屬性
通過type我們可以獲取事件發(fā)生的類型，比如點擊事件我們獲取的是'click'字符串。
var go = document.getElementById('go');
function goFn(event) {
console.log(event.type); // 輸出'click'
}
go.addEventListener('click', goFn, false);
2.target屬性
target屬性主要用于獲取事件的目標(biāo)對象，比如我們點擊a標(biāo)簽獲取的是a標(biāo)簽的html對象。
var go = document.getElementById('go');
function goFn(event) {
var target = event.target;
console.log(target === go) // 返回true
}
go.addEventListener('click', goFn, false);
在IE8及之前版本，我們需要使用srcElement而非target。兼容方案如下：
function goFn(event) {
var event = event || window.event,
target = event.target || event.srcElement;
console.log(target === go) // 返回true
}
3. 鼠標(biāo)事件屬性
在用鼠標(biāo)觸發(fā)事件時，主要的事件屬性包含鼠標(biāo)的位置和按鍵的狀態(tài)，比如：clientX和clientY指定了鼠標(biāo)在窗口坐標(biāo)中的位置，button和which指定了按下的鼠標(biāo)鍵是哪個。
function moveFn(event) {
console.log(event.screenX) // 獲取鼠標(biāo)基于屏幕的X軸坐標(biāo)
console.log(event.screenY) // 獲取鼠標(biāo)基于屏幕的Y軸坐標(biāo)
console.log(event.clientX) // 獲取鼠標(biāo)基于瀏覽器窗口的X軸坐標(biāo)
console.log(event.clientY) // 獲取鼠標(biāo)基于瀏覽器窗口的Y軸坐標(biāo)
console.log(event.pageX) // 獲取鼠標(biāo)基于文檔的X軸坐標(biāo)
console.log(event.pageY) // 獲取鼠標(biāo)基于文檔的Y軸坐標(biāo)
}
function clickFn(event) {
console.log(event.button) // 獲取鼠標(biāo)按下的鍵。非IE瀏覽器中0為鼠標(biāo)左鍵，1為鼠標(biāo)中鍵，2為鼠標(biāo)右鍵
console.log(event.which) // 獲取指定事件上哪個鍵盤鍵或鼠標(biāo)按鈕被按下
}
document.addEventListener('mouseover', moveFn, false);
document.addEventListener('click', clickFn, false);
4.鍵盤事件屬性
在用鍵盤觸發(fā)事件時，主要的事件屬性包含鍵盤的按鍵keyCode和是否按下特殊鍵，比如：keyCode指定了按下鍵的鍵碼值，ctrlKey指定是否按下了ctrl鍵。
function keyFn(event) {
console.log(event.keyCode); // 獲取按下鍵的鍵碼值
console.log(event.ctrlKey); // 獲取是否按下了ctrl鍵
console.log(event.shiftKey); // 獲取是否按下了shift鍵
console.log(event.altKey); // 獲取是否按下了alt鍵
console.log(event.metaKey); // 獲取是否按下了meta鍵
}
document.addEventListener('keyup', keyFn, false);
類似的事件屬性還有表單事件屬性和window事件屬性等，這里不再做詳細介紹。有興趣的同學(xué)可以查閱相關(guān)資料。
總結(jié)
本文主要講解了DOM事件中Event對象的常用屬性和方法，同時也介紹了其在IE中的兼容性問題及解決方案。然而關(guān)于DOM事件的知識點遠不止這些，希望僅此能夠幫助初識DOM的開發(fā)者。
備注：文本參考自《Javascript權(quán)威指南》一書及慕課網(wǎng)教程《DOM事件揭秘》。
以上就是本文的全部內(nèi)容，希望對大家有所幫助，有興趣的朋友可以看下《DOM事件的深入淺出（一）》，謝謝對腳本之家的支持！
相關(guān)文章
詳解js對象中屬性的兩種類型之?dāng)?shù)據(jù)屬性和訪問器屬性
在理解vue底層響應(yīng)式原理時，了解到，原來對象中的屬性，不單單從表面看起來那么簡單是key:value形式，而是還有隱藏的內(nèi)部特性，其中對象內(nèi)的屬性分為兩種類型的屬性：數(shù)據(jù)屬性和訪問器屬性，本文將給大家詳細介紹一下數(shù)據(jù)屬性和訪問器屬性,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)可拖拽登錄框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
封裝一個vue中也可使用的uniapp的全局彈窗組件(任何頁面都可以彈出)
在寫uniapp小程序的時候,彈窗提醒經(jīng)常會用到,雖然彈窗的組件很多,但是通常別人封裝好的彈窗組件自定義度不高,很難匹配自己的ui需求,這篇文章主要給大家介紹了封裝一個vue中也可使用的uniapp的全局彈窗組件的相關(guān)資料,這個組件在任何頁面都可以彈出,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了基于JS實現(xiàn)前端壓縮上傳圖片的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
js中AppendChild與insertBefore的用法詳細解析
這篇文章主要是對js中AppendChild與insertBefore的用法進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)拖拽位置預(yù)覽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
實例詳解JavaScript中setTimeout函數(shù)的執(zhí)行順序
關(guān)于javascript的運行機制大家都應(yīng)該有所了解了吧，其實javascript是一個單線程的機制，但是因為隊列的關(guān)系它的表現(xiàn)會讓我們感覺是一個多線程的錯覺。下面這篇文章通過實例主要給大家介紹了關(guān)于JavaScript中setTimeout函數(shù)執(zhí)行順序的相關(guān)資料，需要的朋友可以參考下。2017-07-07
flv.js是一款優(yōu)秀的開源web端flv文件播放器，flv格式目前廣泛應(yīng)用在直播及音視頻錄制領(lǐng)域，本文就詳細的介紹一下flv.js的具體使用教程，感興趣的可以了解一下2023-05-05
這篇文章主要給大家分享了js中toString方法的3個作用，文章圍繞js中toString方法的相關(guān)資料展開全文內(nèi)容，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2021-12-12
編碼規(guī)范就是指導(dǎo)如何編寫和組織代碼的一系列標(biāo)準，下面通過本文給大家?guī)砹? 種JavaScript編碼規(guī)范，需要的朋友參考下2018-01-01