从编程小白到全栈开发：了解事件机制
在上一篇文章中，我们初步了解了在HTML中处理用户操作的知识，最主要的，就是如何对指定的DOM元素添加事件监听以获取用户操作，并进行后续的处理。这里所使用到的这种基于事件的处理方式，其本质是一种消息传递机制，我们称之为事件机制。
简介
在事件机制中，有3样最重要的东西：
- 事件生产者
- 事件对象
- 事件消费者
事件生产者可以产生一系列的事件对象，然后事件对象携带着必要的信息，传递给事件消费者。
可以看出来，这是一种单向的消息传递模型，事件消息总是从生产者传递到消费者。那既然事件机制传递消息是单向的，那么如果两个对象间要通过事件机制实现双向通信，是否可能呢？这太简单了，把它们既作为生产者又作为消费者就行了：
这个理解起来应该不难吧？
接着呢，一个事件生产者所产生的事件，其实可以有多个消费者：
反之，一个事件消费者，也可以消费由多个生产者产生的事件：
好吧，我知道上面所描述的这些什么生产者啊消费者的概念，对于一个初学者来说，听起来还是有点迷糊，不太容易理解这套机制到底是怎样工作的。那我们来整一个通俗易懂的例子吧：
我家小区门口有闸机，需要刷卡才能进入。如果有陌生来访者，保安大哥就出现了，询问来访者去几栋、几零几室、户主是谁等信息，答对了才登记并放行。
这个例子中，有着和我们上面讲的概念一一对应的3个重要对象：
- 事件生产者：陌生来访者
- 事件：无卡访问
- 事件消费者：保安大哥
保安大哥的职责，就是时刻监视着是否有陌生来访者产生了“无卡访问”事件，一旦产生，保安大哥就会立刻启动他应对这一事件的处理流程：询问并核对信息，答对后登记并放行。
这样一讲，是不是好理解多了？
事件冒泡
在讲事件冒泡这个有点抽象的概念之前，我还是想以保安大哥来举个例子。
虽然有陌生无卡访问者的来访，但是有些陌生无卡来访者的情况比较特殊，而保安大哥的权限还是比较小的，自己处理不了，这个时候，就需要通知他的上级----保安队长来处理，如果保安队长能处理，则他处理掉就完事儿了（或处理后同时上报给他的上级）；如果他也仍然处理不了，就需要再通知他的上级----小区物业主管来处理......
这种将事件层层向上级通报的机制，就被形象的称作事件冒泡。
好，那么这个概念对应到我们的HTML DOM编程中来，具体会是个什么样子呢？我们先前已经明白了一个HTML文件对应一棵DOM树，DOM节点之间也有父子层级关系，所以当在一个子节点上触发一个事件，该事件也会随着DOM树的层级路径，由子节点向父节点进行层层传递，请看以下示例：
<div class="outer" onclick="outerClickHandler(event)">
<div class="inner" onclick="innerClickHandler(event)">
<button id="mybtn" onclick="buttonClickHandler(event)">点我试试</button>
</div>
</div>
<script>
function buttonClickHandler(event) {
console.log('button clicked')
}
function innerClickHandler(event) {
console.log('inner clicked')
}
function outerClickHandler(event) {
console.log('outer clicked')
}
</script>以上代码中，我们创建了一个<button>按钮，这个按钮拥有一个class为inner的<div>父节点，还有一个class为outer的<div>祖父节点。这三个DOM元素上，都分别设置了onclick事件监听函数。我们来尝试点击以下<button>按钮，看看会有什么情况发生：
button clicked inner clicked outer clicked
我们的开发者工具控制台上，打印出了这样的三行结果。这个是我们预料之中的事情，因为事件冒泡在这里起了作用：
- 当我们用鼠标在
<button>按钮上点击的时候，一个click事件产生了，这个事件首先被<button>接收到并被事先设置好的click事件处理函数buttonClickHandler进行处理； - 接着，这个事件通过冒泡，上升传递到父节点inner上，inner节点接受到这个事件后，同样启动了它的click事件处理函数
innerClickHandler进行处理； - 最后，事件继续上升，到达outer节点并被其click处理函数
outerClickHandler进行处理。
那么这个click事件到这里就结束了，不再冒泡了么？不，它会继续冒泡，在它之上，至少还有<body>和<html>节点呢，一棵DOM树的根节点是<html>，事件冒泡到这里才会结束。
讲到这里，一定有反应快的朋友会问，有什么办法可以提前让冒泡结束？因为冒泡有时候也会带来副作用啊，会触发父节点上本来不希望触发的监听函数。这个当然是有办法来解决的！我们只要在不希望事件继续冒泡的时候，调用event对象的stopPropagation函数，即可使事件终止冒泡了。我们把上面的示例代码稍微改一下：
function buttonClickHandler(event) {
console.log('button clicked')
event.stopPropagation()
}改动后，尝试点击<button>按钮，你会发现，打印结果中，只会出现一行结果了，inner和outer不再会接受到通过冒泡上来的click事件，所以它们的click事件处理函数不再会因为点击<button>按钮而被触发了：
button clicked
总结
事件机制是一种简单有效的消息传递机制，它不仅在前端的HTML DOM编程中被广泛使用，在服务端的JavaScript开发中也拥有极高的使用价值。合理的使用好事件机制，可以让你的代码架构变得更优雅。
多动手，勤思考。 欢迎关注一斤代码的系列课程《从编程小白到全栈开发》