细说JS系列(二十二)—事件机制

99 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第22天,点击查看活动详情

铃铛说点题外话

一句话前情回顾:两种数据类型(基本数据类型、复杂数据类型)以及typeof和instanceof判断数据类型

一句话介绍今天:事件机制

铃铛说正文

image.png

我们先看一句话:事件的触发过程是怎么样的?知道什么是事件代理吗?这绝对是一道面试比较常问的问题之一,那我们先来看看什么是事件流

事件流

事件流是一个事件沿着特定数据结构传播的过程。冒泡和捕获是事件流在DOM中两种不同的传播方法。也可以说事件流是冒泡到捕捉的过程

我们对事件流也详细分了三个阶段:事件捕获阶段处于目标阶段事件冒泡阶段

接下来我们在详细说说这三种阶段

事件捕获阶段

这个过程我们通俗点理解就是,当我们鼠标点击或者其他方式触发DOM事件的时候,浏览器会从根节点由外向内进行事件传播。也可以换一种说法就是点击子元素,如果父元素通过事件捕获的方式注册了对应的事件,会触发父元素绑定的事件。

事件冒泡阶段

事件冒泡和事件捕获恰恰相反,事件冒泡是按照从内到外的顺序进行事件传播,一直到根节点

无论是事件捕获还是使劲按冒泡,它们都有一个共同的特点也可以说是同一个行为,就是事件传播

image.png

事件流阻止

在一些特定的情况下,我们徐娅阻止事件流的传播,阻止默认动作的发生。

事件默认阻止在不同浏览器有不同的处理方式

  • event.preventDefault():取消事件对象的默认动作以及继续传播。
  • event.stopPropagation()/ event.cancelBubble = true:阻止事件冒泡。
  • IE下使用 event.returnValue= false
  • 在非IE下则使用 event.preventDefault()进行阻止

跟铃铛说再见

学习的最后一步:放松

今日冷笑话:今天去相亲女的说:我是个很传统的人!我:太好了我也是啊不知道你对三妾这种传统怎么看

放松结束,猜猜明天会说讲些什么吧