js监听多个事件_JavaScript基础之石某人对“事件”的认知0.1

在“JavaScript基础之石某人对“事件”的认知0.0”中简单叙述了我对事件绑定，事件的三要素和事件的类型，那么今天我在这里接着叙述我对事件的传播、改变事件触发的阶段、事件对象三个方面的认知；

一、事件的传播；

话不多说，先上案例

三个包裹着的DIV，都绑定了点击事件，问： 当点击 div1 时，会发生什么现象？

例一

这里先给大家做一个简单的介绍：当我点击div1 的时候，就会触发事件1，但是紧跟着，事件二和事件三同样也会被触发；

根据我的测试，可以得到以下的一个结果：

图一

这种现象我们称为 事件冒泡

图二

根据相关书籍和图二我们可以了解到：在JS中当一个时间发生以后，他会在不同的DOM节点之间进行传播，这种传播分为三个阶段：从window对象传导导目标节点，称为：捕获阶段；第二阶段：在目标节点上触发，称为 目标阶段 ；第三阶段：从目标节点传导回window对象，称为 冒泡阶段。

需要注意的是：事件传播的最上层对象是window，事件的传播顺序在捕获阶段依次为：window、document、html、body、div；在冒泡阶段依次为div、body、html、document、window。

另：三种事件绑定方式全部默认为监听冒泡阶段事件；

二、改变事件触发的阶段

相对于其他而言，我对于如何改变事件触发这方面的知识了解的相对较少；

但是想让事件监听在捕获阶段，只能通过 addEventListener 方法来进行设置！

三、事件对象

1、事件对象中的常用的属性和方法

2、事件代理/委托

3、阻止浏览器默认行为和阻止事件传播

事件的触发，在绝大数情况下是一种用户自我的一种行为，所以对于我们来说，我们一般不能确定用户会在什么时间来触发事件，而且根据事件的传播机制，我们甚至都不能确定事件触发后悔发生在哪个节点，所以接下来我简单的说一下事件对象这个事情，分享一下我的学习心得：首先面对这样的情况，当事件发生以后，系统会调用我们写好的事件处理程序，当然了，系统会在调用处理程序时，将事件发生的相关事件的全部信息，封装称为一个对象，作为参数传给监听函数（即 事件处理程序），我们把整个封装好的对象称之为事件对象。

当然了根据事件类型的不同，事件对象中包函的信息也会有所不同，如点击事件中，包含鼠标点击（mouseEvent等）的横纵坐标位置，键盘事件（keydown等）中会包含键盘的键值（键盘码）等等；

既然谈到了事件对象，那就要说一下之间对象中的属性和方法，当然了，这里只会说一下一些常用的属性及方法

1、事件对象中的常用属性和方法

常用的事件对象属性：

event.bubbles =>返回一个布尔值，表示事件是否冒泡

event.eventPhase =>返回一个整数值，表示事件传播的阶段

0：事件未发生 1：事件在捕获阶段 2：事件在执行阶段 3：事件在冒泡阶段

event.type =>返回一个字符串，表示事件类型

event.timeStamp =>返回一个时间戳，表示事件发生的时间

event.clientX =>返回鼠标事件触发的坐标X

event.clientY =>返回鼠标事件触发的坐标Y

event.target =>返回触发事件的那个节点

event.currentTarget =>返回事件当前所在的节点（即正在执行绑定事件的那个节点）

2、事件代理/委托

由于事件会在冒泡阶段向上传播到父级节点上，因此我们可以把子节点的监听函数定义在父级节点上，利用父级节点的监听函数来统一对多个子元素来进行处理事件，我们把这种方法称之为事件代理 也叫做 事件委托 ；

常用的属性：event.target/event.currentTarget；

注释：event.target 对事件起源目标的引用，属性返回触发事件的那个节点；

event.currentTarget 会返回事件当前所在节点，即正在执行的监听函数所绑定的那个节点。

target属性会返回事件发生的节点，用于比较；

3、阻止浏览器默认行为&阻止事件传播

浏览器的默认行为：举个例子，比如写一个 a 标签，浏览器会默认把他当做一个链接进行跳转，而且 a 标签所包含的文本信息也会变颜色，自动在文本下方添加下划线，这些都是浏览器的默认行为：

例三

event.preventDefault( ):取消浏览器的默认行为

event.stopPropagation( ):阻止事件在DOM中继续传播，防止在触发定义在别的节点上的监听函数；

到这里，我对于JS中的事件就介绍就到这里了，如果再后面的学习过程中有更深层次的学习，我会再次进行分享。如果写的有不对的地方希望各位可以指出来，我石某人会认真的改正；谢谢。