摘要：事件處理器和事件偵聽器事件處理器它是通過是由元素提供的屬性注冊的函數(shù)。事件處理器內部的關鍵字被設置為注冊該事件處理器的元素。而事件偵聽器則指向嚴格模式下。

以下所說到的 IE 都是指 IE8 以及更早期版本的 IE

以下所說到的 IE 都是指 IE8 以及更早期版本的 IE

以下所說到的 IE 都是指 IE8 以及更早期版本的 IE

我們先了解 EventTarget ，它一個接口，由一個可以接受事件的對象實現(xiàn)的; 同時也可以給它添加偵聽器。

EventTarget，可以是 element ， document ， window ， XMLHttpRequest 等等。

它是通過是由 DOM 元素提供的 on{eventtype} 屬性注冊的函數(shù)。

它的作用：幫助管理元素如何對事件反應。

// 這模式為 DOM 0級事件
Click me

或

點我咯



// 點擊之后都會有彈出 ‘I am div1 ’ 。
// 缺點如下：
// 第一種：把代碼寫在了 html 元素里面，簡直災難....
// 第二種：他們之間有強耦合性，如果修改函數(shù)名，兩個地方到哦要改。

同時也可以用 js ，幫 DOM 元素添加 on{eventtype} 。

// 同樣為 DOM 0級事件
快點我

它是通過 *EventTarget.addEventListener()注冊的對象或函數(shù)。

EventTarget.addEventListener(eventtype, listener, options)

- **eventtype**： 事件類型，如 *click* ， *change* ， *focus* 等等 。可以點[這里][2]看看有哪些事件類型 。

- **listener**： 它為一個函數(shù)。當監(jiān)聽的事件觸發(fā)時，要執(zhí)行什么操作。

- **options**： 下面會說。

IE 的話，則是：EventTarget.attachEvent(eventNameWithOn, listener)。

- **eventNameWithOn**： 這里的事件類型要帶 ***on*** 。

// DOM 2級事件

Click me

事件處理器在同一個事件類型上不能綁定多個事件。而事件偵聽器可以。

// 第一個例子， 點擊后會只彈出 1 。

Click me


// 第二個例子， 點擊只會彈出 2 。

Click me



// 為何彈出不一樣？這是因為生成DOM樹和JS執(zhí)行的方式不同。

事件處理器內部的 this 關鍵字被設置為注冊該事件處理器的 DOM 元素。 而事件偵聽器則指向 undefined (嚴格模式下)。

這里先說下 addEventListener 的第三個參數(shù) *options 。

options 有很多選擇，點這里可以看。主要講的是里面 useCapture。

useCapture 它是 Boolean 值。

- *false* ： 默認值。事件會冒泡。
- *true* : 事件會捕獲。

注意：IE 下，只有冒泡，沒有捕獲。所以 attachEvent 沒有第三個參數(shù)

如果子元素和父元素都有事件處理程序，觸發(fā)子元素的事件后，父級的事件跟著觸發(fā)，就像在水里吐出氣泡，再往上觸發(fā)父級的父級事件。如上圖

注意了，他們的事件類型是一致才行！！！。

事件處理器情況

  


    


  

// 點擊div3,彈出的數(shù)字順序是： 3 -> 2 -> 1 。

事件偵聽器情況

  


    


  


// 點擊 div3 ， 彈出順序："I am div3" -> "I am div2" -> "I am div1"

如果事件處理器 和 事件偵聽器 都有呢，怎么執(zhí)行？代碼就不寫了，其實就是上面的結合。答案如下：

    3 -> "I am div3" -> 2 -> "I am div2" -> 1 -> "I am div1"
    因為DOM先生成，獲取onclick，加載JS時，再注冊監(jiān)聽事件。

其實和事件冒泡差不多，只是先從父到子。

注意了，他們的事件類型是一致才行！！！。

代碼其實跟上面差不多，就是 addEventListener() 第三個參數(shù) false 改為 true 。

div1.addEventListener("click", fn1, true);
div2.addEventListener("click", fn2, true);
div3.addEventListener("click", fn3, true);

// 點擊div3, 彈出的順序為 "I am div1" -> "Iam div2" -> "I am div3"

事件流又稱為事件傳播，DOM2級事件規(guī)定的事件流包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。

首先發(fā)生的是事件捕獲，為截獲事件提供了機會。然后是實際的目標接收到事件，最后一個階段是冒泡階段，可以在這個階段對事件做出響應。

由于 addEventListener 同一事件類型可以監(jiān)聽多個事件，如圖：

let div1 = document.getElementById("div1");
let div2 = document.getElementById("div2");
let div3 = document.getElementById("div3");

let fn1 = () => alert("I am div1");
let fn2 = () => alert("I am div2");
let fn3 = () => alert("I am div3");

div1.addEventListener("click", fn1, true);
div1.addEventListener("click", fn1, false);

div2.addEventListener("click", fn2, true);
div2.addEventListener("click", fn2, false);

// 如果 處于目標階段，有沒 true 和 false 都一樣的了。
// 如果點擊的是 div3 ，可寫成 div3.addEventListener("click", fn3)
div3.addEventListener("click", fn3, true);
div3.addEventListener("click", fn3, false);

點擊 div3, 執(zhí)行順序：

"I am div1" -> "I am div2" -> "I am div3" -> "I am div2" -> "I am div1" 。

觸發(fā)事件程序，函數(shù)內都可以獲取一個事件對象 event ，而 IE 的事件對象是 window.event 。

event 對象有個方法 stopPropagation ， 它可以阻止事件冒泡和捕獲。

而 IE 的 window.event 有個 cancelBubble 方法，組止冒泡。

  // 部分關鍵代碼
  let fn1 = () => alert("I am div1");

  let fn2 = () => {
    alert("I am div2");
    event.stopPropagation();

    // IE 是 window.event.cancelBubble()，當然下面addEventListener 改為 attachEvent。
  }

  let fn3 = () => alert("I am div3");

  div1.addEventListener("click", fn1, true);
  div1.addEventListener("click", fn1, false);

  div2.addEventListener("click", fn2, true);
  div2.addEventListener("click", fn2, false);

  div3.addEventListener("click", fn3, true);
  div3.addEventListener("click", fn3, false);

點擊 div3,執(zhí)行順序："I am div1" -> "I am div2" 。

如果有事件捕獲和冒泡，則先執(zhí)行事件捕獲（ 上面有說 ）。所以先彈出 " I am div1" 。

由于 fn2 里面有 event.stopPropagation() ，阻止捕獲和冒泡，所以彈出 "I am div2"，之后就沒了。

當我們點擊鏈接，會跳到新的加載頁面，當我們完成 input 的按回車，就會提交。 等等這些都是元素的默認事件。

但不是所有元素都有默認事件的。可以根據(jù) 該元素的事件對象 event 的 cancelable 值來判斷， false 則沒有默認事件。

我們可以通過 event.preventDefault 阻止默認事件，IE 的是 window.event.returnValue 。

阻止默認事件 不在 事件流 當中的，當然也不會影響冒泡和捕獲。

百度

點擊之后，不會跳轉到百度哦。

雖然現(xiàn)在 MVVM 框架是主流，但基礎的東西還是要理解透。如果寫一個原生的組件時候，那么這些會涉及到的。
在此祝大家冬至快樂！也提前說聲圣誕快樂！