JS事件进阶

事件进阶

DOM事件流

当事件发生时，事件会在发生事件的目标节点与DOM树根节点之间按照特定的顺序进行传播，这个事牛传播的过程就是事件流。

事件流分为事件捕获和事件冒泡两种。

事件捕获是由网景公司的团队提出的，指的是事件流传播的顺序应该是从DOM树的根节点一直到发生事件的节点。

事件冒泡是由微软公司的团队提出的，指的是事件流传的顺序应该是从发生事件的节点到DOM树的根节点。

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=C%3A%
在JavaScript中，默认情况下事件处理函数是按照事件冒泡阶段的顺序执行的，也就是说，先执行目标节点的事件处理函数，再向上“冒泡”，执行父节点的事件处理函数。若要实现事件捕获，则需要将addEventListener()方法的第3个参数设置为true，表示在事件捕获阶段完成事件处理。

事件监听

通过事件属性的方式注册事件时，一个事件类型只能注册一个事件处理函数。而在 JavaScript 中还有一种为元素注册事件的方式，就是事件监听，通过事件监听可以给一个事件类型注册多个事件处理函数。

事件监听的语法格式如下：

element.addEventListener(type,callback,［captrue］);

type：指定事假类型

callback：事件处理函数

captrue：true表示捕获阶段完成事件处理，false（默认）表示冒泡阶段完成事件处理。

事件移除

element为获取到的dom对象。

移除事件属性方式注册（即在标签中定义事件属性）的事件函数：

element.onclick=null;

移除事件监听方式注册的事件函数：

element.removeEventListener（type,callback）;

type表示要移除的事件类型（与添加事件监听时一致）.

callback表示事件处理函数，且该callback必须与注册时的事件处理函数是同一个函数。

事件对象

通过事件处理函数的参数即可获得事件对象，事件在被触发时会产生事件对象，然后 JavaScript会将其以参数的形式传给事件处理函数.

所以在事件处理函数中需要用一个形参来接收事件象 event，参数名称可以随意设置。

事件对象的常用属性

属性/方法	说明	兼容浏览器
e.target	获取触发事件的对象	新版浏览器
e.type	获取事件类型	所有浏览器
e.stopPropagation()	阻止事件冒泡	新版浏览器
e.cancelBubble	阻止事件冒泡	早期浏览器
e.preventDefault()	阻止默认事件（默认行为）	新版浏览器

在实际开发中，有时需要阻止元素的默认行为，例如，在表单验证时发现表单填写有误，需要阻止表提交。

在事件处理函数中，阻止默认行为可以通过 return false 来实现，除此之外，还可以通过事件对象的preventDefault()方法实现。

需要注意的是，只有事件对象的 cancelable 属性设置为true，才可以使preventDefault()方法阻止其默认行为。

cancelable属性的含义为“事件是否可取消”。

对于一个注册了事件的元素来说，有时我们希望只有该元素触发事件，但因为事件冒泡的存在，该元素触发事件时会使该元素的父元素及祖先元素事件被触发，这种现象与预期效果不一致，所以需要阻止事件冒泡。

事件对象的stopPropagation()方法可以阻止事件冒泡行为。对于早期版本正浏览器，应使用cancelBubble属性。

常用事件

焦点事件

事件名称	触发时机
focus	当获得焦点时触发（不会冒泡）
blur	当失去焦点时触发（不会冒泡）

焦点事件包括获得焦点事件和失去焦点事件，常用于表单验证。

例如，检测文本框是否失去焦点，如果失去焦点，则说明用户填写过文本框，需要验证用户填写的内容是否正确。

鼠标事件

事件名称	触发时机
click	当鼠标单击时触发
dblclick	当鼠标双击时触发
mouseover	当鼠标指针移入时触发（当前元素和其子元素都触发）
mouseout	当鼠标指针移出时触发（当前元素和其子元素都触发）
mouseenter	当鼠标指针移入时触发（子元素不触发）
mouseleave	当鼠标指针移出时触发（子元素不触发）
mousedown	当按任意鼠标按键时触发
mouseup	当释放任意鼠标按键时触发
mousemove	在元素内当鼠标指针移动时持续触发

表中，mouseover／mouseout 比 mouseenter／mouseleave 优先触发。

鼠标事件对象：event对象代表事件的状态，跟事件相关的一系列信息的集合。

现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。

常用鼠标事件对象属性

鼠标事件对象属性	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标 IE9+支持
e.pageY	返回鼠标相对于文档页面的Y坐标 IE9+支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

键盘事件

事件名称	触发时机
keypress	按键盘按键并松开（Shift、Fn、CapsLock等非字符键除外）时触发
keydown	按键盘按键时触发
keyup	键盘按键弹起时触发

在我们实际开发中，我们更多的使用keydown和keyup， 它能识别所有的键（包括功能键）。

Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值。

常用键盘对象属性

键盘事件对象属性	说明
keyCode	返回该键的ASCII值
key	键的名字，如“Enter”

表单事件

事件名称	事件触发时机
submit	当表单提交时触发，用于＜form＞标签
reset	当表单重置时触发，用于＜form＞标签
change	当内容发生改变时触发，一般用于＜input＞、＜select＞、＜textarea＞标签

其他事件

事件名称	触发时机
load	页面或图像加载完成
select	文本选中时