在实现事件委托之前，首先必须先了解事件的绑定、监听和派发的含义。
事件的绑定
var div = document.getElementById('content')
content.onclick = function(){
console.log('绑定成功！')}
这是最直接简单的绑定在DOM元素上的一个事件。但是它有一个缺点：后面重复绑定的事件会直接覆盖掉之前绑定的事件。于是就产生了新的方法：
事件监听
var div = document.getElementById('content')
function f1 (){
console.log('绑定事件1
')}
function f2 (){
console.log('绑定事件2'
)}
div.addEventListener('click',f1)
div.addEventListener('mousemove',f2)
addEventListener()事件的监听可以解决事件覆盖的问题，还可以控制事件的触发方式（即事件的捕获和冒泡）。
事件派发
事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。
冒泡：
微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<p>子元素</p>
</div>
</body>
</html>
在这个例子中，当子元素P被点击时，事件冒泡的顺序为：p -> div -> body -> html -> document
捕获：
网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
仍然是上面的例子，当子元素P被点击时，事件捕获的顺序则是：document -> html -> body -> div -> p
下图是两个事件的通知顺序：
ps:可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来阻止事件的冒泡传播。在addEventListener()监听事件中，可以添加第三个参数 false（执行冒泡）或者 true（执行捕获）来选择需要的事件流顺序，addEventListener() 默认为false。
事件委托
事件委托是基于以上几个要点的。
以下是原生JS实现的事件委托的方法：
let dom = {
on: function(element, eventType, selector, fn) {
element.addEventListener(eventType, e => {
let el = e.target
while (!el.matches(selector)) {
el = el.parentNode
if (element === el) {
el = null
break
}
}
el && fn.call(el, e, el)
})
return element
},
具体举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div{
border:1px solid #000;
}
p{
background:red;
}
h1{
background:blue;
}
</style>
</head>
<body>
<div>
<p>这是p</p>
<h1>这是h1</h1>
</div>
<script>
var div = document.querySelector('div')
div.addEventListener('click',function(e){
var t = e.target
while(t.tagName !=='H1'){
t = t.parentNode
if(t === div){
t = null
break;
}
}
if(t){
console.log('你点击了div里的h1')
}else{
console.log('你点击的不是div里的h1')
}
})
</script>
</body>
</html>
例子的功能很简单，当你点击div里面的h1元素的时候，打印'你点击了div里的h1',当你点击的不是div里面的h1元素的时候，打印'你点击的不是div里的h1'
var div = document.querySelector('div')
div.addEventListener('click',function(e){
代码解析：选中div,并且对div进行监听，当div里面的元素被点击时触发。
var t = e.target
while(t.tagName !=='H1'){
t = t.parentNode
代码解析：声明t为被点击选中的目标，进入while循环，当被点击的目标不是h1包含的元素时，将t赋值为该点击目标的父级元素的tagName再比较，一直冒泡向上查找直到找到h1为止或者继续进入while循环。
if(t === div){
t = null
break;
}
代码解析：如果t的值是div,证明了从初始点击目标一直冒泡找到最外面的div层都不存在h1的父元素，证明了它并不存在于“div里面的h1元素”中，跳出循环。
if(t){
console.log('你点击了div里的h1')
}else{
console.log('你点击的不是div里的h1')
}
代码解析：如果t存在，证明找到了点击元素存在为h1的父元素，即存在于div里的h1元素当中，打印出'你点击了div里的h1'如果t不存在,证明并没有找到点击元素有tagName为h1的父元素，并不存在于div里的h1元素当中，打印出'你点击的不是div里的h1'
事件委托的优点：
- 减少使用监听器，优化代码
- 能够监听动态的内容
网友评论