因为兼容ie，一般使用事件冒泡
事件
js和浏览器交互通过事件实现
事件流
页面元素接受事件的顺序
事件捕获
从根节点到目标节点
目标阶段
到达目标阶段
事件冒泡
从当前节点上溯到根节点
js的五种监听方式
1.HTML事件处理程序（冒泡）
事件处理程序中的代码在执行时，有权访问到全局作用域中的任何代码。
缺点：
*违反了html与js相分离原则
*元素一出现就出发了事件，js还没加载，会报错
<body onload="doSomething()">//不是doSomething，双引号里面是js的执行
<div onclick="console.log('触发事件')">//单引号不能改成双引号，因为里面是js，不能使用未经转义的html
等同于：
el.setAttribute('onclick', 'doSomething()');
2.元素节点的事件属性（冒泡）(DOM0级事件处理)
如果这个函数中存在this关键字，那么this就会指向这个对象
缺点：1.一个事件只能定义一个监听函数，意思是：如果定义两次onclick属性，后一次覆盖前面一次
2.我们不能控制元素的事件流（捕获or冒泡）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<input id="myButton" type="button" value="click me">
<script>
var button = document.getElementById('myButton');
function handler() {
alert('click');
}
button.onclick = handler;
// 移除事件
// button.onclick = null;
</script>
</body>
</html>
3.EventTarget.addEventListener（推荐）（DOM2级事件处理程序）
this同样指向当前元素，故函数在元素的作用域中执行。
DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
此处详细：https://wangdoc.com/javascript/events/eventtarget.html
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
在DOM事件流中，实际的目标在捕获阶段不会接收事件。就是说在捕获阶段，事件从document到html再到body后就停止了。下一个阶段是“处于目标”阶段，于是事件在div中发生，并在事件处理中被看成是冒泡阶段的一部分。然后，冒泡阶段发生。IE8及更早的版本不支持DOM事件流，浏览器在捕获阶段触发事件对象上的事件，结果就是有两个机会在目标对象上面操作事件。
（1）*DOM2级事件定义了两个方法：addEventListener()和removeEventListener()。
*需要注意的是，通过addEventListener()指定的事件处理程序只能通过removeEventListener()移除；
*同时，如果在addEventListener()中的第二个参数是一个匿名函数，则无法通过removeEventListener()移除，也没有办法移除。
*而IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()，这两个方法直接收两个参数，第一个为事件名称（注意事件名称都有on前缀，例如click事件则为onclick），第二个参数为事件处理程序函数。
function hello() {
console.log('Hello world');
}
var button = document.getElementById('btn');
button.addEventListener('click', hello, false);//第三个参数false的时候是冒泡排序，true的时候是捕获
移除事件监听addEventListener：
div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);//与addEventListener参数完全相同，并且第二个参数不能是匿名函数（会认为两个匿名函数不是同一个）。
优点：
*同一个事件可以添加多个监听函数。
*能够指定在哪个阶段（捕获阶段还是冒泡阶段）触发监听函数。
*除了 DOM 节点，其他对象（比如window、XMLHttpRequest等）也有这个接口，它等于是整个 JavaScript 统一的监听函数接口。
4.IE事件处理程序
IE事件处理程序中有类似与DOM2级事件处理程序的两个方法：
*attachEvent()
*detachEvent()
$btn.attachEvent('onclick', function() {
alert('i am isaac');
});
它们都接收两个参数：
i.事件处理程序名称。如onclick、onmouseover，注意：这里不是事件，而是事件处理程序的名称，所以有on。
ii.事件处理程序函数。如function(){alert("clicked");}
（之所以没有和DOM2级事件处理程序中类似的第三个参数，是因为IE8及更早版本只支持冒泡事件流。）
注意：
1.IE事件处理程序中attachEvent()的事件处理程序的作用域和DOM0与DOM2不同，她的作
用域是在全局作用域中。因此，不同于DOM0和DOM2中this指向元素，IE中的this指向
window。
2.同样，我们可以使用attachEvent()来给同一个元素添加多个事件处理程序。但是与DOM2
不同，事件触发的顺序不是添加的顺序而是添加顺序的相反顺序。
3.同样地，通过attachEvent()添加的事件处理程序必须通过detachEvent()方法移除，同样
的，不能使用匿名函数。
4.支持IE事件处理程序的浏览器不只有IE浏览器，还有Opera浏览器。
5.跨浏览器事件处理程序
即先判断DOM2级事件处理程序，再判断IE事件处理程序，最后使用DOM0级事件处理程序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨浏览器事件处理程序</title>
</head>
<body>
<button id="button">点我</button>
<script>
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);//注意：这里默认使用了false（冒泡）
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);//注意：这里默认使用了false（冒泡）
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
}
};
function handler(){
alert("clicked");
}
var button=document.getElementById("button");
EventUtil.addHandler(button,"click",handler);
</script>
</body>
</html>
DOM0和DOM2区别
如果定义了两个dom0级事件，dom0级事件会覆盖
dom2不会覆盖，会依次执行
dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖
事件委托
<ul id="color-list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<script>
(function () {
var colorList = document.getElementById("color-list");
colorList.addEventListener('click', showColor, false);
function showColor(e) {
e = e || window.event;
var target = e.target || e.srcElement;
console.log(target.innerHTML)
}
})();
</script>
好处：
（1）将多个事件处理器减少到一个，因为事件处理器要驻留内存，这样就提高了性能。
想象如果有一个100行的表格，对比传统的为每个单元格绑定事件处理器的方式和事件代理（即table上添加一个事件处理器），不难得出结论，事件代理确实避免了一些潜在的风险，提高了性能。
、
（2）如果新增其他子元素（a,span,div等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。
比如增加一个元素，事件并没有起效：
<script>
(function () {
var colorList = document.getElementById("color-list");
var colors = colorList.getElementsByTagName("li");
for (var i = 0; i < colors.length; i++) {
colors[i].addEventListener('click', showColor, false);
}
;
function showColor(e) {
e = e || window.event;
var targetElement = e.target || e.srcElement;
console.log(targetElement.innerHTML);
}
var li=document.createElement('li');
li.innerText='123';
colorList.append(li);
})();
</script>
参照：
https://wangdoc.com/javascript/events/model.html
https://www.cnblogs.com/zhuzhenwei918/p/6139281.html#1
高级程序设计283页开始
网友评论