填坑十萬個為什麼?(14)

NO IMAGE

簡介:很多概念不清或忘記,重新構建自己的知識體系。每天問自己1~多個問題。我是菜鳥 成為大神之路!

1. 事件,事件捕獲和事件冒泡理解?

①有哪些事件?

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

②DOM事件流

“DOM2級事件”規定的事件流包含三個階段:事件捕獲階段,處於目標階段和事件冒泡階段。首先發生的是事件捕獲,然後是實際的目標接收到事件,最後階段是冒泡階段。

填坑十萬個為什麼?(14)

(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的事件處理機制以及事件代理(事件委託)

相關文章

填坑十萬個為什麼?(18)

填坑十萬個為什麼?(17)

填坑十萬個為什麼?(16)前15天小結

填坑十萬個為什麼?(15)