目录：
- 事件触发流程
- DOM0级事件
- DOM2级事件
- 事件对象
- 事件委托
- 阻止冒泡
- 阻止默认行为
事件触发流程：
捕获阶段---->到达目标---->冒泡阶段
- 事件捕获：从父元素开始逐渐向子元素传播
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
点击div后，事件顺序：document->html->body-div
- 事件冒泡：从子元素开始逐渐向父元素传播
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
点击div后，事件顺序：div->body->html-document
DOM0级事件：
只能绑定一个事件函数，如果多次绑定会覆盖。即通过on+事件类型进行绑定，通过元素.on事件类型 =
null进行移除。
let div = document.getElementById("div");
div.onclick = function () { //绑定事件
console.log("DOM0");
};
div.onclick = null; //移除事件
DOM2级事件：
通过事件监听绑定，可以绑定多个时间函数。即通过
addEventListener(type,fn,boolean)进行绑定，通过removeEventListener(type,fn,boolean)进行解绑。
addEventListener：接受三个参数，第一个参数为事件类型，第二个参数为事件函数，第三个为是否冒泡（false表示冒泡 ）
let div = document.getElementById("div");
function bind() { //事件函数
console.log("DOM2");
}
div.addEventListener("click", bind, false);//高级浏览器绑定事件
div.removeEventListener("click", bind, false);//高级浏览器移除事件
div.attachEvent("onclick", bind);//IE绑定事件(只能冒泡)，第一个参数要加on，且绑定事件倒序执行，后写先执行
div.detachEvent("onclick", bind);//IE移除事件
事件对象：
在
DOM发生的事件，所有相关信息都会被储存在一个event对象里。
比如之前提到的鼠标事件就储存在这个对象里。
事件委托：
把一个元素的事件函数交给另一个元素。通常，会把一个元素的事件交给它的父元素或更外层元素上。
如果定义理解不了，不妨举个例子：
比如你和朋友都有快递到了，那你们分别去取肯定效率不高，那如果你去将快递全部取出，再根据收件人分给你和你的兄弟，这样是不是省时又省力。
那理解了事件委托，我们来看看它有什么用？
现在有一个需求，点击列表中的列表项，执行事件。
方法一：给每个列表项绑定事件函数
方法二：事件委托，将事件绑定给列表（取出所有快递），执行时判断目标（根据收件人分发）。
事件委托：
把一个元素的事件函数交给另一个元素。通常，会把一个元素的事件交给它的父元素或更外层元素上。
如果定义理解不了，不妨举个例子：
比如你和朋友都有快递到了，那你们分别去取肯定效率不高，那如果你去将快递全部取出，再根据收件人分给你和你的兄弟，这样是不是省时又省力。
那理解了事件委托，我们来看看它有什么用？
现在有一个需求，点击列表中的列表项，执行事件。
方法一：给每个列表项绑定事件函数
方法二：事件委托，将事件绑定给列表（取出所有快递），执行时判断目标（根据收件人分发）。
let ul = document.querySelector("ul");
ul.onclick = function (e) {
let target = e.target;
switch (target.id) {
case "li1":
console.log(1)
break;
case "li2":
console.log(2)
break;
case "li3":
console.log(3)
break;
}
}
阻止冒泡：
把一个元素的事件函数交给另一个元素。通常，会把一个元素的事件交给它的父元素或更外层元素上。
事件委托：
如果定义理解不了，不妨举个例子：
比如你和朋友都有快递到了，那你们分别去取肯定效率不高，那如果你去将快递全部取出，再根据收件人分给你和你的兄弟，这样是不是省时又省力。
那理解了事件委托，我们来看看它有什么用？
现在有一个需求，点击列表中的列表项，执行事件。
方法一：给每个列表项绑定事件函数
方法二：事件委托，将事件绑定给列表（取出所有快递），执行时判断目标（根据收件人分发）。
let ul = document.querySelector("ul");
ul.onclick = function (e) {
let target = e.target;
switch (target.id) {
case "li1":
console.log(1)
break;
case "li2":
console.log(2)
break;
case "li3":
console.log(3)
break;
}
}
在上面介绍事件触发流程时，点击div就会造成冒泡，那怎样阻止呢？事件对象中就储存了这个方法。
let box = document.getElementById("box");
let content = document.getElementById("content");
content.onclick = function (e) {
let e = e || window.event(); //IEevent对象
e.stopPropagation(); //高级浏览器阻止冒泡
//e.cancelBubble = true; IE8阻止冒泡
console.log("content");
};
box.onclick = function () {
console.log("box");
};
阻止默认行为：
浏览器的一些事件中，带有一些默认行为比如a标签的点击事件中会带有跳转页面的行为表单的点击事件中带有提交的默认行为滚轮事件中带有改变页面卷动值的默认行为。
- 高级浏览器：
e.preventDefault()
let elementA = document.getElementsByTagName("a")[0];
elementA.addEventListener('click',e=>{
e.preventDefault();
},false)
- IE浏览器：
e.returnValue = true;
let elementA = document.getElementsByTagName("a")[0];
elementA.attachEvent('click',e=>{
e.returnValue = false;
})
- DOM0级:
return false
let elementA = document.getElementsByTagName("a")[0];
elementA.onclick = function () {
return false;
};
