JS篇(007)-事件委託是什麼?

答案：利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行！

解析：

一、那什麼樣的事件能夠用事件委託，什麼樣的事件不能夠用呢？

• 適合用事件委託的事件：click，mousedown，mouseup，keydown，keyup，keypress。
• 值得注意的是，mouseover 和 mouseout 雖然也有事件冒泡，可是處理它們的時候須要特別的注意，由於須要常常計算它們的位置，處理起來不太容易。
• 不適合的就有不少了，舉個例子，mousemove，每次都要計算它的位置，很是很差把控，在不如說 focus，blur 之類的，自己就沒用冒泡的特性，天然就不用事件委託了。

二、爲何要用事件委託

• 1.提升性能

<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>鳳梨</li>
</ul>

// good
document.querySelector('ul').onclick = (event) => {
  let target = event.target
  if (target.nodeName === 'LI') {
    console.log(target.innerHTML)
  }
}

// bad
document.querySelectorAll('li').forEach((e) => {
  e.onclick = function() {
    console.log(this.innerHTML)
  }
})

• 2.新添加的元素還會有以前的事件。

三、事件冒泡與事件委託的對比

• 事件冒泡：box 內部不管是什麼元素，點擊後都會觸發 box 的點擊事件
• 事件委託：能夠對 box 內部的元素進行篩選

四、事件委託怎麼取索引？

<ul id="ul">
        <li>aaaaaaaa</li>
        <li>事件委託了 點擊當前，如何獲取 這個點擊的下標</li>
        <li>cccccccc</li>
    </ul>
    <script>
        window.onload = function () {
            var oUl = document.getElementById("ul");
            var aLi = oUl.getElementsByTagName("li");
            oUl.onclick = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if (target.nodeName.toLowerCase() == "li") {
                    var that = target;
                    var index;
                    for (var i = 0; i < aLi.length; i++)
                        if (aLi[i] === target) index = i;
                    if (index >= 0) alert('個人下標是第' + index + '個');
                    target.style.background = "red";
                }
            }
        }
    </script>

拓展：

• 鍵盤事件：keydown keypress keyup
• 鼠標事件：mousedown mouseup mousemove mouseout mouseover

參考

參與互動