从编程小白到全栈开发:了解事件机制

  1. 云栖社区>
  2. 博客>
  3. 正文

从编程小白到全栈开发:了解事件机制

zarknight 2017-10-08 00:16:00 浏览717
展开阅读全文

在上一篇文章中,我们初步了解了在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开发中也拥有极高的使用价值。合理的使用好事件机制,可以让你的代码架构变得更优雅。

多动手,勤思考。
欢迎关注一斤代码的系列课程《从编程小白到全栈开发》

网友评论

登录后评论
0/500
评论
zarknight
+ 关注