1、如何监听事件
目前W3C对DOM进行标准化规定中对事件监听有两种方式，DOM level 0 中规定 button.onclick = function(){}，DOM level 2中规定 button.addEventListener('click', function(){})，前一个方式最简单但是存在一个严重的问题就是如果一个元素绑定不同事件时前者会被后者覆盖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id='xxx'>点我</button>
<script>
xxx.onclick = function(){
console.log(1)
}
xxx.onclick = function() {
console.log(2)
}
</script>
</body>
</html>
上面同一个button绑定了两个事件但是结果只有2，说明该种方法存在一个致命的bug，于是后一种方法button.addEventListener('click', function(){})诞生了
xxx.addEventListener('click', function() {
console.log(1)
})
xxx.addEventListener('click', function() {
console.log(2)
})
button.addEventListener('click', function(){})方法之所以不会覆盖原有事件是因为每次都会生产一个全新的匿名函数，和前面的函数完全不同。
2、冒泡与捕获
冒泡
微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。
捕获
网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
<style>
#xxx{
border:1px solid black;
height: 200px;
background:yellow;
}
#yyy{
border:1px solid black;
height: 100px;
background:green;
}
#zzz{
border:1px solid black;
height: 50px;
background:blue;
}
</style>
<div id='xxx'>
<div id='yyy'>
<div id='zzz'>
</div>
</div>
</div>
<script>
xxx.addEventListener('click',function(){
console.log('xxx');
},false);
yyy.addEventListener('click',function(){
console.log('yyy');
},false);
zzz.addEventListener('click',function(){
console.log('zzz');
},false);
</script>
W3C为了区分捕获与冒泡增加了一个参数，默认为false，即为冒泡事件，上面的代码执行结果
点击xxx元素，输出xxx；
点击yyy元素，输出yyy xxx;
点击zzz元素，输出 zzz yyy xxx；
如果将false改为true则改为捕获事件，点击的输出结果顺序刚好相反。
无论是冒泡事件还是捕获事件，元素都会先执行捕获阶段，从上往下，如有捕获事件，则执行；一直向下到目标元素后，从目标元素开始向上执行冒泡元素，如有冒泡事件则执行。
xxx.addEventListener('click',function(){
console.log('xxx');
},true);
yyy.addEventListener('click',function(){
console.log('yyy');
},false);
zzz.addEventListener('click',function(){
console.log('zzz');
},false);
上面代码将xxx改为捕获事件，如果点击zzz元素则输出结果为xxx zzz yyy。
3、事件委托
假设我们下面一串代码
<ul id="p1">
<li id="c1">1</li>
<li id="c2">2</li>
<li id="c3">3</li>
<li id="c4">4</li>
</ul>
假如我们监听每一个li，当事件的执行函数相同时，我们假如这样写
var liList = document.querySelectorAll('li')
function fn() {
console.log('ok')
}
liList[0].addEventListener('click',fn)
liList[1].addEventListener('click', fn)
liList[2].addEventListener('click', fn)
liList[3].addEventListener('click', fn)
这样就导致监听器过多，浪费内存，于是我们进行优化，监听ul，点击ul达到相同的效果，监听器大大减少。
var ul = document.querySelector('ul')
function fn() {
console.log('ok')
}
ul.addEventListener('click',fn)
但是这样写又出现一个问题，那就是当我们点击属于ul元素区域而非li元素区域时也会触发事件，所以代码还需要优化
var ul = document.querySelector('ul')
function fn(e) {
if( e.target.tagName === "LI")
console.log('ok')
}
ul.addEventListener('click',fn)
这样写基本没有问题，但是假如我们在li标签里添加新标签呢？经过测试在添加span标签后，代码存在缺陷，针对这样的问题我们最开始想到在if判断条件语句改为e.target.tagName === "LI" || e.target.parentNode.tagName === "LI"测试后发现可以运行，那么假如我们在span里再添加标签呢？显然这样写并没有从根本上解决问题。所以我们优化代码为
var ul = document.querySelector('ul')
function fn(e) {
var el = e.target
while(el.tagName !== "LI"){
el = el.parentNode
}
if(el)
console.log('ok')
}
ul.addEventListener('click',fn)
这样写我们发现当我们点击属于ul元素区域而非li元素区域时代码会报错，这是因为点击时会一层一层向上找，但是一直没有li与之匹配，所以我们将代码优化为
var ul = document.querySelector('ul')
function fn(e) {
var el = e.target
while(el.tagName !== "LI"){
if (el === document) {
el = null
break;
}
el = el.parentNode
}
if(el)
console.log('ok')
}
ul.addEventListener('click',fn)
至此，我们的事件委托代码基本上可以算完成了，进行总结可以写为以下代码来应对大多数情况的事件委托
element.addEventListener('click', function(e) {
let el = e.target
while (!el.matches(selector)) {
if (element === el) {
el = null
break;
}
el = el.parentNode
}
if (el) {
console.log('执行回调函数')
}
})
注：
上面所写代码经测试可运行，若有问题，经留言评论，谢谢。
网友评论