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

在上一篇文章中,我们初步了解了在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 条评论
登录 后参与评论

相关文章

来自专栏星流全栈

二〇一六年的前端入门指南

13880
来自专栏企鹅号快讯

微信小程序电商实战-首页(上)

上一篇:微信小程序电商实战-入门篇 嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么...

49270
来自专栏美丽应用

自改:(对编程友好的)百度手机输入法皮肤

24730
来自专栏一“技”之长

iOS9系列专题一——3D Touch 原

        在iphone6s问世之后,很多果粉都争先要体验3D Touch给用户带来的额外维度上的交互,这个设计之所以叫做3D Touch,其原理上是增加...

8020
来自专栏Hongten

图片浏览器_js打造_源码开放

源码:http://files.cnblogs.com/hongten/source.zip

19320
来自专栏华仔的技术笔记

React Native 初探

38060
来自专栏ytkah

微信小程序开发教程第七章:微信小程序编辑名片页面开发

编辑名片有两条路径,分为新增名片流程与修改名片流程。 用户手填新增名片流程: ? ? ? 首先跳转到我们的新增名片页面 1 需要传递用户的当前 userId,w...

34670
来自专栏杨龙飞前端

react的一些思考

在做好第一个需求之后,我接到了一个react写的产品,这让我异常的兴奋,终于能写react了

9530
来自专栏PHP在线

最新HTML5学习路线整合

HTML5是万维网的核心语言,标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,一方面提升了用户体验,另一方面HTML5技术跨平台,适配多...

23240
来自专栏企鹅号快讯

史上最全的web前端学习教程汇总!

第一阶段:HTML+CSS HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础:js基础教程、js内置对象常用方...

46350

扫码关注云+社区

领取腾讯云代金券