简述事件委托

221 阅读1分钟

1.什么是事件委托?

事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件。

2.案例

<ul>
        
</ul>
<button>点击增加</button>
var ul = document.querySelector('ul');
    var btn = document.querySelector('button');  //动态添加元素
    btn.addEventListener('click',function(){
        var li = document.createElement('li');
        li.innerHTML='我是新添加的li元素';
        ul.appendChild(li);
    })

    ul.addEventListener('click',function(e){
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].index=i
        }
        var tag = e.target;//获取当前点击的元素节点
        if (tag.nodeName.toLowerCase()=='li') {//使用元素节点的nodeName属性获得元素的名称,并转换为小写,判断是不是我们想要的
            console.log(tag.index);//如果是,就输出对应的索引值
        }
    });

3.优点

  1. 省监听数(内存)
  2. 可以监听动态元素