事件处理是非常重要的内容，事件处理是JS的起点，有事件JS才有触发点，JS才能发挥他的作用。
我们前面都用过click事件，但只是简单的使用一下，事件还有更多细节的东西，笔者将通过几篇文章，试图把JS事件讲清楚。
事件处理的三种方式
方式一：直接在元素中处理(了解)
不推荐，不能写复杂的代码。
<button id="btn" onclick="console.log('clicked')">按钮1</button>
方式二：在script中指定对应的函数(推荐)
这种方式是非常常见的。不过有个小问题就是不能有多个监听函数，后面的监听函数会覆盖前面的监听函数。
<script type='text/javascript'>
var btn = document.querySelector("#btn")
function click1() {
console.log("click1");
}
function click2() {
console.log("click2");
}
btn.onclick = click1
btn.onclick = click2
</script>
方式三：通过addEventListener函数添加监听(推荐)
可以同时监听多个函数，并且可以监听不同的事件。
<script type='text/javascript'>
var btn = document.querySelector("#btn")
function click1() {
console.log("第一个click");
}
function click2() {
console.log("第二个click");
}
document.addEventListener("click",click1)
document.addEventListener("click",click2)
</script>
总结：
方式二和方式三都是可以使用的。
方式二在处理只有一个监听函数的时候是完全没问题的，也非常好用。
方式三非常的通用，并且可以处理多个函数的情况。
事件流
有一个div,里面有一个按钮。如果点击按钮，那么div能够接收到点击事件吗？答案是可以的。不光div能接收到，甚至连body和html标签都能接收到点击事件。
可以通过下面的代码进行测试。
<div id="box">
div
<button id="btn">按钮</button>
</div>
#box{
width: 200px;
height: 200px;
background-color: lightblue;
}
btn.addEventListener('click', function () {
console.log("btn");
})
box.addEventListener('click', function () {
console.log("box");
})
body.addEventListener('click', function () {
console.log("body");
})
html.addEventListener('click', function () {
console.log("html");
})
点击按钮会依次输出下面的内容：
这似乎是非常合理的，btn是在最上面的。但仔细一想，其实没这回事，因为根本就没有上下一说。如果btn是在上面的话，那html标签是怎么回事？实际上，浏览器处理的逻辑是按照DOM节点的内外来决定的。
主流的浏览器都是从内到外来处理事件的。也就是下图的冒泡阶段。而有的浏览器使用的是相反的逻辑，也就是下图的捕获阶段。
这是有历史原因的。第四代 Web 浏览器（IE4 和 Netscape Communicator 4）开始开发时，IE 和 Netscape 开发团队几乎同时遇到了处理事件先后顺序的问题。两者提出了几乎完全相反的事件流方案。IE 将支持事件冒泡流，而 Netscape Communicator 将支持事件捕获流。
现在主流默认都是冒泡处理方式，要改成捕获方式也是可以的。 只是比较麻烦，一般不推荐。
在第三个参数加上true就可以了。每个函数都要加上，如果同时存在冒泡和捕获的话，那么是捕获排在前面的，内部按照各种的逻辑排序。不过，一般不要这样做。
btn.addEventListener('click', function () {
console.log("btn");
}, true)
box.addEventListener('click', function () {
console.log("box");
}, true)
body.addEventListener('click', function () {
console.log("body");
}, true)
html.addEventListener('click', function () {
console.log("html");
}, true)
总结:
推荐使用默认的冒泡方式就可以了。