事件委托:就是将子类的事件交给父类去执行。事件委托利用的是事件冒泡的机制。
一、事件委托的好处
1、减少内存消耗
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
正如上面的例子,如果我们需要给每一个li标签都设置点击事件,那么需要设置很多
个点击事件,导致内存消耗就很大。如果我们使用事件委托,将全部的事件都委托给
最外层的Ul上,那么只需要在ul上监听一个事件即可。
2、动态绑定事件
我们在开发中很多时候,都需要去异步请求数据,并且将数据展示到前端页面上,如
果我们给每一个标签元素都设置点击事件,那么就必须在每一次新增或者删除标签元
素时,都要将相关的事件进行解绑或者新增。如果使用事件委托,那么就不用在标签
删除的时候将相关事件解绑或者赋值,因为所有的事件都设置在外层的标签元素上。
二、基本实现
<body>
<ul>
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
<li>标签4</li>
<li>标签5</li>
</ul>
<script>
document.getElementsByTagName("ul")[0].addEventListener("click", function(e) {
var event = e || window.event //兼容性问题
var target = event.target || event.srcElement //兼容性问题
if(target.nodeName.toLowerCase() === "li") {
console.log("this is tag of li:" + target.innerHTML)
}
})
</script>
</body>
试想一种情况,如果我们只是需要所有标签中的class为liStyle的元素,我们可以使用target.