Web前端入门第 73 问：JavaScript DOM 常用事件那点小事

网页上各种炫酷的交互效果离不开各种 DOM 事件 的支持，在写这篇文章之前，一度以为 JS 的事件绑定/取消方式就我知道的那几种，翻阅文档之后才发现，知识面还是有待提升，多翻翻文档，就像发现新大陆一样~~
常用事件

鼠标事件：
click：鼠标左键单击
dblclick：鼠标左键双击
mousedown / mouseup：鼠标按下/释放
mousemove：鼠标移动
mouseover / mouseout：鼠标移入/移出元素
mouseenter / mouseleave：鼠标移入/移出元素
contextmenu：鼠标右键点击时触发
wheel：鼠标滚轮滚动触发
键盘事件：
keydown / keyup：键盘按键按下/释放
窗口/文档事件：
DOMContentLoaded：HTML 解析完成
load：资源加载完成（如窗口、图片）
beforeunload / unload：窗口关闭前/后
resize：窗口大小变化
scroll：窗口滚动事件
动画事件：
animationstart / animationend：CSS 动画开始/结束
transitionstart / transitionend：CSS 过渡开始/结束
表单事件：
submit：表单提交
change：表单值变化（如输入框、下拉框）
input：输入时触发
focus / blur：元素获取/失去焦点
媒体事件：
play / pause：媒体播放/暂停
ended：媒体播放结束
timeupdate：播放时间更新
volumechange：音量变化
移动端事件：
touchstart：手指首次接触屏幕时触发
touchmove：手指在屏幕上滑动时连续触发
touchend：手指离开屏幕时触发
touchcancel：系统中断触摸时触发（如来电、弹窗）
devicemotion：检测设备加速度和旋转速率
deviceorientation：检测设备方向，多用于指南针或屏幕旋转
HTML5 新事件：
drag / drop：拖拽操作
copy / cut / paste：剪贴板操作
visibilitychange：页面可见性变化，比如浏览器 Tab 切换、浏览器最小化
hashchange：URL 哈希变化
popstate：浏览器历史变化（如前进/后退）
hashchange 和 popstate 在常规的开发中不太常用，但 Vue 和 React 中的路由底层可都是用它们实现的，前端单页应用能迅速的火爆起来，少不了它俩的功劳。
除了这些常用事件外，还有一些标签独有事件，比如 img 标签的 error 和 load 事件等。这里就不一一列举了，可阅读 MDN 文档获得更多信息。
MDN 事件文档：
https://developer.mozilla.org/zh-CN/docs/Web/Events
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/copy_event
事件绑定

见过常用事件之后，再聊聊 JS 绑定事件的几种方式，以 click 事件为例。
最开始学习 JS 的时候，就用的是 HTML 标签属性的方式绑定事件，比如这样：

1. <button onclick="handleClick()"><button id="button"><button id="button2"><button id="button3"><button id="button4"><button id="button5"><button onclick="handleClick(this)"><button id="button2"><button id="button3"><button id="button4"><button id="button5">这里是按钮</button></button></button></button></button></button></button></button></button></button></button>

复制代码

慢慢的学习之后发现这种方式有个弊端啊，handleClick 这个函数名定义在全局作用域之下，这东东可被称为 污染全局变量 了，后来就用上了这种方式：

1. <button onclick="handleClick()"><button id="button"><button id="button2"><button id="button3"><button id="button4"><button id="button5"><button onclick="handleClick(this)"><button id="button2"><button id="button3"><button id="button4"><button id="button5">这里是按钮</button></button></button></button></button></button></button></button></button></button></button>

复制代码

这种方式虽然看起来没啥大问题，但是如果一个 DOM 节点绑定了两个相同的事件之后，只会执行最后一个绑定的方法，比如：

1. <button onclick="handleClick()"><button id="button"><button id="button2"><button id="button3"><button id="button4"><button id="button5"><button onclick="handleClick(this)"><button id="button2"><button id="button3"><button id="button4"><button id="button5">这里是按钮</button></button></button></button></button></button></button></button></button></button></button>

复制代码

还是存在弊端，如果团队合作的时候，有其他兄弟伙用这种方式绑定就完蛋了，所以后来又学到了一种新的方式：

1. <button onclick="handleClick()"><button id="button"><button id="button2"><button id="button3"><button id="button4"><button id="button5"><button onclick="handleClick(this)"><button id="button2"><button id="button3"><button id="button4"><button id="button5">这里是按钮</button></button></button></button></button></button></button></button></button></button></button>

复制代码

嗯，这种绑定方式就完美了，在任何地方都可以绑定，还能一个事件多次绑定，也不存在全局污染。
取消绑定

有绑定事件，那必然就有取消绑定的需求。某些场景下，绑定的事件只需要执行一次，这种需求其实用一个变量也能实现，比如：

1. <button onclick="handleClick()"><button id="button"><button id="button2"><button id="button3"><button id="button4"><button id="button5"><button onclick="handleClick(this)"><button id="button2"><button id="button3"><button id="button4"><button id="button5">这里是按钮</button></button></button></button></button></button></button></button></button></button></button>

复制代码

再复杂一点，搞一个计数器，想限制多少次就限制多少，比如限制按钮只能点击五次：

1. <button onclick="handleClick()"><button id="button"><button id="button2"><button id="button3"><button id="button4"><button id="button5"><button onclick="handleClick(this)"><button id="button2"><button id="button3"><button id="button4"><button id="button5">这里是按钮</button></button></button></button></button></button></button></button></button></button></button>

复制代码

虽然这种方式也能满足需求，但与取消绑定的方式多少有点出入，还是聊聊取消绑定的几种方法。
使用 HTML 标签属性绑定的事件，可通过 removeAttribute 方法取消绑定：

1. <button onclick="handleClick()"><button id="button"><button id="button2"><button id="button3"><button id="button4"><button id="button5"><button onclick="handleClick(this)"><button id="button2"><button id="button3"><button id="button4"><button id="button5">这里是按钮</button></button></button></button></button></button></button></button></button></button></button>

复制代码

使用 onclick 绑定的事件，可通过将属性置空取消绑定：

1. <button onclick="handleClick()"><button id="button"><button id="button2"><button id="button3"><button id="button4"><button id="button5"><button onclick="handleClick(this)"><button id="button2"><button id="button3"><button id="button4"><button id="button5">这里是按钮</button></button></button></button></button></button></button></button></button></button></button>

复制代码

使用 addEventListener 绑定的事件，可通过 removeEventListener 方法取消绑定：

1. <button onclick="handleClick()"><button id="button"><button id="button2"><button id="button3"><button id="button4"><button id="button5"><button onclick="handleClick(this)"><button id="button2"><button id="button3"><button id="button4"><button id="button5">这里是按钮</button></button></button></button></button></button></button></button></button></button></button>

复制代码

removeEventListener 第二个参数必须传入要移除的事件函数，否则方法报错！！
关于只执行一次的事件，也可以用 addEventListener 的第三个参数 once 来处理，比如：

1. <button onclick="handleClick()"><button id="button"><button id="button2"><button id="button3"><button id="button4"><button id="button5"><button onclick="handleClick(this)"><button id="button2"><button id="button3"><button id="button4"><button id="button5">这里是按钮</button></button></button></button></button></button></button></button></button></button></button>

复制代码

AbortController 移除事件

曾一度以为 AbortController 这个 API 仅用于终止 fetch 请求，后来发现也可以用于移除 DOM 事件，比如：

1. <button onclick="handleClick()"><button id="button"><button id="button2"><button id="button3"><button id="button4"><button id="button5"><button onclick="handleClick(this)"><button id="button2"><button id="button3"><button id="button4"><button id="button5">这里是按钮</button></button></button></button></button></button></button></button></button></button></button>

复制代码

这个 API 的强大之处在于可一次性移除多个事件，嗯..比 removeEventListener 是要更加方便。
写在最后

虽然 Vue / React 中的 DOM 事件 框架已经整合优化，但某些需求场景还是免不了要使用原生的 DOM 事件，某个 Vue 组件元素要随窗口滚动而发生变化，这时候还是得靠原生的事件来实现。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！