DOM的事件

一、事件綁定

要想讓 JavaScript 對用戶的操作作出響應，首先要對 DOM 元素綁定事件處理函數。所謂事件處理函數，就是處理用戶操作的函數，不同的操作對應不同的名稱。它是事件驅動編程模式的主要編程方式

在JavaScript中，有三種常用的綁定事件的方法：

1. 在DOM元素中直接綁定；
2. Element節點的事件屬性； //DOM0級事件處理程序
3. 綁定事件監聽函； //DOM2級事件處理程序

在DOM元素中直接綁定(HTML的on-屬性)

在HTML中，我們可以在DOM元素上綁定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等

<div onclick="test()">

<script>
fucntion test(){
    alert("Hello World");
}
</script>

使用這個方法，只會在冒泡階段觸發。

使用這種方法時，on-屬性的值是將會執行的代碼，而不是一個函數。

Element節點的事件屬性（在JavaScript代碼中綁定事件）

在JavaScript代碼中（即script標籤內）綁定事件可以使JavaScript代碼與HTML標籤分離，文檔結構清晰，便於管理和開發。

<div id="test">

<script>
var div = document.getElementById("test");
div.onclick = function(){
  console.log('Hello World');
};
</script>

使用這個方法，只會在冒泡階段觸發。

使用事件監聽綁定事件（addEventListener方法）

3個事件階段

關於事件監聽，W3C規範中定義了3個事件階段，依次是捕獲階段、目標階段、冒泡階段。

1. 第一階段：從window對象傳導到目標節點，稱爲“捕獲階段”（capture phase）。
2. 第二階段：在目標節點上觸發，稱爲“目標階段”（target phase）。
3. 第三階段：從目標節點傳導回window對象，稱爲“冒泡階段”（bubbling phase）。

EventTarget接口

DOM的事件操作（監聽和觸發），都定義在EventTarget接口。Element節點、document節點和window對象，都部署了這個接口。

該接口定義了三個方法：

1. addEventListener：綁定事件的監聽函數
2. removeEventListener：移除事件的監聽函數
3. dispatchEvent：觸發事件

addEventListener：

用於在當前節點或對象上，定義一個特定事件的監聽函數。（同一節點可以綁定多個事件）

element.addEventListener(event, function, useCapture)

• event : （必需）事件名，支持所有 DOM事件 。
• function：（必需）指定要事件觸發時執行的函數。

• useCapture：（可選）指定事件是否在捕獲或冒泡階段執行。true，捕獲。false，冒泡。默認false。

  function test() {
    console.log('Hello world');
  }
  
  var div = document.getElementById('test');
  div.addEventListener('click', test, false);
  

removeEventListener：

用來移除addEventListener方法添加的事件監聽函數。（可以解除相應的綁定）

div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);

dispatchEvent:

在當前節點上觸發指定事件，從而觸發監聽函數的執行。(後面會細講)

二、事件委託

事件委託就是利用冒泡的原理，把事件加到父元素或祖先元素上，觸發執行效果。

1.可提高JavaScript性能

<ul id="list">
  <li id="item1" >item1</li>
 <li id="item2" >item2</li>
 <li id="item3" >item3</li>
</ul>

<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");

document.addEventListener("click",function(event){
 var target = event.target;
 if(target == item1){
  alert("hello item1");
 }else if(target == item2){
  alert("hello item2");
 }else if(target == item3){
  alert("hello item3");
 }
})
</script>

2.事件委託可用於對動態添加的元素動態的添加事件：

<ul id="list">
 <li id="item1" >item1</li>
 <li id="item2" >item2</li>
 <li id="item3" >item3</li>
</ul>

<script>
var list = document.getElementById("list");

document.addEventListener("click",function(event){
 var target = event.target;
 if(target.nodeName == "LI"){
  alert(target.innerHTML);
 }
})

var node = document.createElement("li");
node.id = "item4";
var textnode = document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);
</script>

三、自定義事件

通常情況下，事件的觸發都是由用戶的行爲如點擊、刷新等操作實現，但是，其實有的情況下，事件的觸發必須又程序來實現。

dispatchEvent是作爲高級瀏覽器(如chrome、Firfox等)的事件觸發器來使用的。

document.createEvent();// 創建
event.initEvent();// 初始化
element.dispatchEvent();// 觸發

createEvent參數：HTMLEvents，MouseEvents，UIEvents

initEvent(eventName, canBubble, preventDefault)。分別表示事件名稱，是否可以冒泡，是否阻止事件的默認操作。

dispatchEvent()就是觸發執行了，dom.dispatchEvent(eventObject), 參數eventObject表示事件對象，是createEvent()方法返回的創建的Event對象。

例子：
$(dom).addEvent("alert", function() {
    alert("Holle World");
});

var evt = document.createEvent("HTMLEvents");
evt.initEvent("alert", false, false);
dom.dispatchEvent(evt);