DOM 事件深入淺出（二）

在DOM事件深入淺出（一）中，我主要給大家講解了不同DOM級別下的事件處理程式，同時介紹了事件冒泡和捕獲的觸發原理和方法。本文將繼續介紹DOM事件中的知識點，主要側重於DOM事件中Event對象的屬性和方法。

那麼什麼是DOM事件中Event對象呢？事件對象（event object）指的是與特定事件相關且包含該事件詳細信息的對象。我們可以通過傳遞給事件處理程式的參數獲取事件觸發後所產生的一系列方法和屬性。

Event對象

Event對象其實是一個事件處理程式的參數，當調用事件時，我們只需要將其傳入事件函數就可以獲取。代碼如下：

function getEvent(event) {
    event = event || window.event;
}

上面的事件函數傳入了一個名叫Event的參數作為事件對象，同時做了瀏覽器相容處理。在IE8及以前本版之中，通過設置屬性註冊事件處理程式時，調用的時候並未傳遞事件對象，需要通過全局對象window.event來獲取。所以上述代碼中我們利用 || 來做判斷，如果event對象存在則使用event，不存在則使用window.event。

Event對象包含了幾個方法和多個屬性，通過這些方法和屬性我們可以獲取事件的詳細信息併進行相關處理。

Event對象方法

Event對象主要有以下兩個方法，用於處理事件的傳播（冒泡、捕獲）和事件的取消。

1.stopPropagation

stopPropagation方法主要用於阻止事件的進一步傳播，比如阻止事件繼續向上層冒泡。

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事件對象的一個屬性，設置這個屬性為true能阻止事件進一步傳播。

2.perventDefault

perventDefault方法用於取消事件的預設操作，比如a鏈接的跳轉行為和表單自動提交行為就可以用perventDefault方法來取消。代碼如下：

<a id="go" href="https://www.baidu.com/">禁止跳轉</a>

var go = document.getElementById('go');

function goFn(event) {
    event.preventDefault();

    console.log('我沒有跳轉！');
}

go.addEventListener('click', goFn, false);

通過preventDefault，我們成功阻止了a鏈接的跳轉行為。不過，在IE9之前的瀏覽器中需要設置returnValue屬性為false來實現。如下：

function goFn(event) {
    event = event || window.event;

    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }

    console.log('我沒有跳轉！');
}

除了以上Event對象的兩個主要方法，當前DOM事件規範草案在Event對象上還定義了另一個方法，命名為stopImmediatePropagation。

3.stopImmediatePropagation

和stopPropagation相比，stopImmediatePropagation同樣可以阻止事件的傳播，不同點在於其還可以把這個元素綁定的同類型事件也阻止了。如：

var go = document.getElementById('go');

function goFn(event) {
    event.preventDefault();
    event.stopImmediatePropagation(); // 阻止事件冒泡並阻止同類型事件

    console.log('我沒有跳轉！');
}

function goFn2(event) {
    console.log('我是同類型事件！');
}

go.addEventListener('click', goFn, false);
go.addEventListener('click', goFn2, false);

我們在a鏈接上繼續加了一個點擊事件，如果我們在goFn方法中添加了stopImmediatePropagation方法，那麼goFn2方法將不會被執行，同時也不會將點擊事件冒泡至上層。

需要註意的是，stopImmediatePropagation目前一部分瀏覽器尚不支持，但是像jQuery這樣的庫封裝了跨平臺的stopImmediatePropagation方法。

Event對象屬性

與Event對象的方法相比，因Event對象的屬性相對較多，文本無法一一講解，所以主要介紹實際項目中常用的Event對象屬性。

1.type屬性

通過type我們可以獲取事件發生的類型，比如點擊事件我們獲取的是’click’字元串。

var go = document.getElementById('go');

function goFn(event) {
    console.log(event.type); // 輸出'click'
}

go.addEventListener('click', goFn, false);

2.target屬性

target屬性主要用於獲取事件的目標對象，比如我們點擊a標簽獲取的是a標簽的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. 滑鼠事件屬性

在用滑鼠觸發事件時，主要的事件屬性包含滑鼠的位置和按鍵的狀態，比如：clientX和clientY指定了滑鼠在視窗坐標中的位置，button和which指定了按下的滑鼠鍵是哪個。

function moveFn(event) {
    console.log(event.screenX) // 獲取滑鼠基於屏幕的X軸坐標
    console.log(event.screenY) // 獲取滑鼠基於屏幕的Y軸坐標
    console.log(event.clientX) // 獲取滑鼠基於瀏覽器視窗的X軸坐標
    console.log(event.clientY) // 獲取滑鼠基於瀏覽器視窗的Y軸坐標
    console.log(event.pageX) // 獲取滑鼠基於文檔的X軸坐標
    console.log(event.pageY) // 獲取滑鼠基於文檔的Y軸坐標
}

function clickFn(event) {
    console.log(event.button) // 獲取滑鼠按下的鍵。非IE瀏覽器中0為滑鼠左鍵，1為滑鼠中鍵，2為滑鼠右鍵
    console.log(event.which) // 獲取指定事件上哪個鍵盤鍵或滑鼠按鈕被按下
}

document.addEventListener('mouseover', moveFn, false);
document.addEventListener('click', clickFn, false);

4.鍵盤事件屬性

在用鍵盤觸發事件時，主要的事件屬性包含鍵盤的按鍵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事件屬性等，這裡不再做詳細介紹。有興趣的同學可以查閱相關資料。

總結

本文主要講解了DOM事件中Event對象的常用屬性和方法，同時也介紹了其在IE中的相容性問題及解決方案。然而關於DOM事件的知識點遠不止這些，希望僅此能夠幫助初識DOM的開發者。

備註：文本參考自《Javascript權威指南》一書及慕課網教程《DOM事件揭秘》。

本文為勞卜原創文章，首發於微信公眾號：前端呼啦圈（Love-FED）

轉載請註明來自——微信公眾號：前端呼啦圈（Love-FED）

公眾號地址    簡書地址    segmentfault地址