DOM事件

1. 執行事件的步驟

獲取事件源
注冊事件（系結事件）
添加事件處理程式（采取函式賦值形式）

2. 注冊事件(系結事件)

2.1 注冊事件概述

注冊事件是指給元素添加事件，注冊事件有兩種方式，分別為傳統方式和方法監聽注冊方式，

2.2 傳統注冊方式

// 1.
<button onclick="alert('hello world')"></button>

// 2.
<button></button>
<script>
    var btn = document.querySelector('button');
    btn.onclick = function() {
        alert('hello world');
}
</script>

利用on開頭的事件
特點：注冊事件的唯一性，同一個元素同一個事件只能設定一個處理函式，最后注冊的處理函式會覆寫前面注冊的處理函式，

2.3 方法監聽注冊方式(推薦)

element.addEventListener();

w3c標準推薦方式
ie9之前的不支持此方法，可以使用attachEvent()代替
特點：同一個元素同一個事件可以注冊多個監聽器，按注冊順序依次執行

2.3.1 addEventListener事件監聽方式

eventTarget.addEventListener(type, listener[, useCapture]);

該方法將指定的監聽器注冊到eventTarget（目標物件）上，當該物件觸發指定的事件時，就會執行事件處理函式，

對于引數：

type：事件型別字串（帶引號），注意不要帶on，eg.click、mouseover
listener：事件處理函式，事件發生時，會呼叫該監聽函式
useCapture：可選引數，是一個布林值，默認為false，如果是true時，表示在事件捕獲階段呼叫事件處理程式；如果是false時，表示在事件冒泡階段呼叫事件處理程式，對于什么是事件捕獲與事件冒泡，可以了解DOM的事件流，

2.3.2 attachEvent事件監聽方式

eventTarget.attachEvent(eventNameWithOn, callback);

該方法將指定的監聽器注冊到eventTarget（目標物件）上，當該物件觸發指定的事件時，指定的回呼函式就會被執行，

對于引數：

eventNameWithOn：事件型別字串，注意要帶on，eg.onclick、onmouseover
callback：事件處理函式，當目標觸發事件時，回呼函式被呼叫

注：ie8及早期版本支持，

2.3.3 注冊事件兼容性的解決

兼容性處理的原則：首先按照大多數瀏覽器，再處理特殊瀏覽器，

function addEventListener(element, eventName, fn) {
    // 判斷瀏覽器是否支持addEventListener方法
    if (element.addEventListener) {
        element.addEventListener(eventName, fn);
    } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, fn);
    } else {
        // 相當于element.onclick = fn
        element['on' + eventName] = fn;
    }
}

3. 洗掉事件(解綁事件)

3.1 傳統事件方式

eventTarget.onclick = null;

3.2 方法監聽注冊方式

// 1.
eventTarget.removeEventListener(type, listener[, useCapture]);

// 2.
eventTarget.detachEvent(eventNameWithOn, callback);

注：如果要洗掉事件，在系結事件時不能將listener和callback寫成匿名函式，要寫成function fn() {}的形式，在呼叫時不需要加小括號，

3.3 洗掉事件兼容性的解決

function removeEventListener(element, eventName, fn) {
    // 判斷當前瀏覽器是否支持removeEventListener方法
    if (element.removeEventListener) {
        element.removeEventListener(eventName, fn);
    } else if (element.detachEvent) {
        element.detachEvent('on' + eventName, fn);
    } else {
        element['on' + eventNAme] = null;
    }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/227104.html

標籤：JavaScript

上一篇：新建Chrome標簽頁，極簡+自用

下一篇：DOM事件流與事件物件