JS篇(007)-事件委托是什么

答案：利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

解析：

1、那什么样的事件可以用事件委托，什么样的事件不可以用呢？

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
值得注意的是，mouseover 和 mouseout 虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。
不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说 focus，blur 之类的，本身就没用冒泡的特性，自然就不用事件委托了。

2、为什么要用事件委托

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.新添加的元素还会有之前的事件。

3、事件冒泡与事件委托的对比

事件冒泡：box 内部无论是什么元素，点击后都会触发 box 的点击事件
事件委托：可以对 box 内部的元素进行筛选

4、事件委托怎么取索引？

    <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

参考

参与互动

巴特西

JS篇(007)-事件委托是什么

最新文章

热门文章