暂无 |

7.事件委托是什么

A
B
C
D
答案:

利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!

解析:

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基础三
js基础四

发表评论

    评价:
    验证码: 点击我更换图片
    最新评论