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.优点
- 省监听数(内存)
- 可以监听动态元素