填坑-十萬個爲何？（14）

簡介:不少概念不清或忘記，從新構建本身的知識體系。天天問本身1~多個問題。我是菜鳥 成爲大神之路!

1. 事件，事件捕獲和事件冒泡理解？

①有哪些事件？

菜鳥教程中的事件手冊：www.runoob.com/jsref/dom-o…
W3school事件手冊：www.w3school.com.cn/jsref/dom_o…

②DOM事件流

"DOM2級事件」規定的事件流包含三個階段：事件捕獲階段，處於目標階段和事件冒泡階段。首先發生的是事件捕獲，而後是實際的目標接收到事件，最後階段是冒泡階段。

（1）捕獲階段（Capture Phase）
事件的第一個階段是捕獲階段。事件從文檔的根節點流向目標對象節點。途中通過各個層次的DOM節點，並在各節點上觸發捕獲事件，直到到達事件的目標節點。捕獲階段的主要任務是創建傳播路徑，在冒泡階段，事件會經過這個路徑回溯到文檔跟節點。
（2）目標階段（Target Phase）
當事件到達目標節點的，事件就進入了目標階段。事件在目標節點上被觸發，而後會逆向迴流，直到傳播至最外層的文檔節點。
（3）冒泡階段（Bubble Phase）
事件在目標元素上觸發後，並不在這個元素上終止。它會隨着DOM樹一層層向上冒泡，回溯到根節點。 冒泡過程很是有用。它將咱們從對特定元素的事件監聽中釋放出來，若是沒有事件冒泡，咱們須要監聽不少不一樣的元素來確保捕獲到想要的事件。

③如何阻止捕獲和冒泡？

調用 event.stopPropagation()。阻止冒泡
調用event.preventDefault()。阻止捕獲

④如何添加事件監聽？

JavaScript中事件監聽的方法總共有三種，分別以下：

element.addEventListener(type, listener,[useCapture]);  //IE6~8不支持
element.attachEvent('on' + type, listener)     //支持IE6~10，IE11不支持
element['on' + type] = function(){}     //支持全部瀏覽器

參數解釋：
    type：事件類型
    listener：事件出發後的回調函數
    useCapture：是否使用捕獲，若是值爲true，useCapture表示用戶但願發起捕獲。
    在發起捕獲以後，只要DOM子樹下發生了該事件類型，都會先被該事件監聽器捕獲，而後再被派發到DOM子樹中的事件監聽器中。
    而且向上冒泡的事件不會觸發那些發起捕獲的事件監聽器。useCapture默認值是true。

例子：
function funEven(){
    console.log("添加事件");
}

element.addEventListener('click', funEven, false);
element.attachEvent('onclick', funEven);
element.onclick = funEven;
複製代碼

2.委託（代理）事件理解？

通常來說，會把一個或者一組元素的事件委託到它的父層或者更外層元素上，真正綁定事件的是外層元素，當事件響應到須要綁定的元素上時，會經過事件冒泡機制從而觸發它的外層元素的綁定事件上，而後在外層元素上去執行函數。

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>
// ...... 表明中間還有未知數個 li
複製代碼

咱們來實現把#list下的li元素的事件代理委託到它的父層元素也就是#list上：

// 給父層元素綁定事件
document.getElementById('list').addEventListener('click', function (e) {
  // 兼容性處理
  var event = e || window.event;
  var target = event.target || event.srcElement;
  // 判斷是否匹配目標元素
  if (target.nodeName.toLocaleLowerCase === 'LI') {
    console.log('the content is: ', target.innerHTML);
  }
});
複製代碼

在上述代碼中， target元素則是在#list元素之下具體被點擊的元素，而後經過判斷 target 的一些屬性（好比：nodeName，id等等）能夠更精確地匹配到某一類#list li元素之上；

參考文章：
①JavaScript 事件委託詳解
②JS的事件處理機制以及事件代理（事件委託）