为什么要用事件委托？
首先，需要了解一下常用的事件监听方法有哪些区别：
常用的监听方法的区别
通常，在页面中监听事件的方式有以下3种：
HTML属性 (DOM Level 0)
HTML允许在元素标签的属性中直接定义以下事件的监听代码，比如下面例子监听了<button> </button>标签的click 事件：
<button onclick="alert('Hello World')">click me</button>
DOM元素属性(DOM Level 0)
对Element节点对象事件属性指定监听函数：
<button id=aButton>click me</button>
<script>
var button = document.querySelector('#aButton')
button.onclick = function(e){
alert('Hello world');
}
</script>
addEventListener方法(DOM Level 2)
通过Element节点、document节点、window对象的addEventListener方法，定义事件监听函数：
<button id=aButton>click me</button>
<script>
var button = document.querySelector('#aButton')
button.addEventListener('click', function(){
alert('Hello world')
})
</script>
DOM为我们提供了以上三种指定监听函数的方法。
前两种方法（DOM Level 0）在使用中只能对当前对象的一个事件指定一个监听函数，这里就产生了几个问题：
- 无法对同一个对象的同种事件注册多个事件监听函数
- 当我们需要对多个对象注册同一个事件监听函数时，需要为每个对象准备一套代码，代码会出现冗余
- 当用JS创建元素时，新的元素无法被监听到
因此，W3C在DOM Level2 中为我们提供了新的事件模型，其特点是：
- DOM事件模型不依赖于特定的事件处理属性
- 可以对任意对象的任何一种事件注册多个监听函数
新的事件模型解决了DOM Level 0 中的几个问题，因此，推荐使用addEventListener()这个方法。
下面我们来看一下关于事件委托的例子：
首先，需要一个简单的页面：
<div class="box">
<ul>
<li>选项<span>另一段话</span></li>
<li>选项<span>另一段话</span></li>
<li>选项<span>另一段话</span></li>
<li>选项<span>另一段话</span></li>
</ul>
</div>
在这个页面中，以对象节点.box 作为委托对象，为其绑定一个监听函数，并获取我们在触发click事件时所点击节点究竟是哪个：
var div = document.querySelector('.box')
div.addEventListener('click', function(e){
var tar = e.target
console.log(str)
})
接下来，假设需要监听里面的<li>触发事件：
var div = document.querySelector('.box')
console.log(div)
div.addEventListener('click', function(e){
var tar = e.target
if(tar.tagName.toLowerCase() === 'li'){
// tagName 默认返回大写
console.log('找到了li')
}
})
此时，<li>元素可以在触发click事件时正常做出反应，但是这里有个问题，在例子中，<li>元素中还有<span>，如果将<span>当作<li>的一部分，上面的代码在点击<span>元素时是无法触发回调的，接下来继续修改：
var div = document.querySelector('.box')
console.log(div)
div.addEventListener('click', function(e){
var tar = e.target
if(tar.tagName.toLowerCase() === 'li' ||
tar.parentNode.tagName.toLowerCase() === 'li'
){
// tagName 默认返回大写
console.log('找到了爸爸是li')
}
})
通过寻找父节点是否符合我们希望监听的对象，但是如果不是父节点，而是祖先的某个节点呢？
var div = document.querySelector('.box')
console.log(div)
div.addEventListener('click', function(e){
var tar = e.target
while(tar.tagName.toLowerCase() !== 'li'){
tar = tar.parentNode
}
if(tar){
alert('找到了祖辈是li')
}else{
alert('没找到呢')
}
})
这里仍然有问题，假如我们触发的事件的对象的祖先节点一直寻找不到<li>，就会寻找至文档根节点，最后返回一个null，会使得while循环报错，既然使用了while循环，那么在寻找父节点找到委托节点<div>时跳出循环，这个问题就得到了解决：
var div = document.querySelector('.box')
console.log(div)
div.addEventListener('click', function(e){
var tar = e.target
while(tar.tagName.toLowerCase() !== 'li'){
if(tar===div){
tar = null
break
}
tar = tar.parentNode
}
if(tar){
alert('找到了祖辈是li')
}else{
alert('没找到呢')
}
})
此时，无论我们触发事件的元素是否监听对象的子元素，或者触发事件的元素是监听对象的祖辈，都有正确的处理路径。
以上就是完整的原生JS事件委托。
当然这里还有其他学习的地方：
- 如果希望监听的对象有部分子元素不触发事件回调，以上的方法则需要修改。
- 如何正确的封装事件委托。
网友评论