参考资料
事件介绍Element事件
目录
常见的事件鼠标事件键盘事件Focus events 添加事件监听方式一：addEventListener()（推荐）方式二：事件处理器属性方式三：内联事件处理器（不推荐） 移除监听器方式一：removeEventListener方式二：AbortController 事件的控制阻止默认行为 preventDefault事件冒泡阻止事件冒泡 stopPropagation事件捕获事件委托常见的事件
鼠标事件
键盘事件
Focus events
添加事件监听
方式一：addEventListener()（推荐）
语法
addEventListener(type, listener);addEventListener(type, listener, options);addEventListener(type, listener, useCapture);
参数
options可选值
示例：绑定input获得焦点事件
<inputtype="text"id="input-name"/><script>let inputName = document.querySelector('#input-name')inputName.addEventListener('focus', (event) => {console.log(event)})</script>
addEventListener 方式可以在单个事件上添加多个监听器
<button>按钮</button><script>const btn = document.querySelector('button')// 添加多个事件处理器btn.addEventListener('click', () => {console.log('处理器1')})btn.addEventListener('click', () => {console.log('处理器2')})</script>
方式二：事件处理器属性
示例：为div元素绑定click点击事件
<style>#box {width: 200px;height: 200px;background-color: gray;}</style><div id="box"></div><script>let box = document.querySelector('#box')box.onclick = (event) => {console.log(event)}</script>
事件处理器属性，不能为一个事件添加一个以上的处理程序，因为任何后续尝试都会覆写较早设置的属性
方式三：内联事件处理器（不推荐）
<inputtype="text"onfocus="handleFocus()"/><script>function handleFocus(event) {let e = event || window.eventconsole.log(e)}</script>
你永远不应该使用 HTML 事件处理器属性——那些已经过时了，使用它们是不好的做法。
移除监听器
方式一：removeEventListener
<button>按钮</button><script>function handleButtonClick(event) {console.log(event)}const btn = document.querySelector('button')// 添加事件处理器btn.addEventListener('click', handleButtonClick)// 移除监听器btn.removeEventListener('click', handleButtonClick)</script>
方式二：AbortController
<button>按钮</button><script>function handleButtonClick(event) {console.log(event)}const controller = new AbortController()const btn = document.querySelector('button')// 添加事件处理器btn.addEventListener('click', handleButtonClick, {signal: controller.signal, // 向该处理器传递 AbortSignal})// 移除任何/所有与该控制器相关的事件处理器controller.abort()</script>
事件的控制
阻止默认行为 preventDefault
表单中只有一个输入框，默认键盘敲下回车就会提交表单，可以阻止这种默认行为
<!-- 表单 --><form id="form"><inputtype="text"id="name"/></form><script>const form = document.querySelector('#form')form.addEventListener('submit', (e) => {e.preventDefault()console.log('submit');})</script>
事件冒泡
当点击button时，外层容器也会接收到click事件
<div id="box"><button>点击</button></div><script>const btn = document.querySelector('button')const box = document.querySelector('#box')btn.addEventListener('click', (e) => {console.log('btn click')})box.addEventListener('click', (e) => {console.log('box click')})</script>
输出顺序
btn clickbox click
阻止事件冒泡 stopPropagation
使用stopPropagation可以阻止事件继续传播
<div id="box"><button>点击</button></div><script>const btn = document.querySelector('button')const box = document.querySelector('#box')btn.addEventListener('click', (e) => {e.stopPropagation() // 阻止冒泡console.log('btn click')})box.addEventListener('click', (e) => {console.log('box click')})</script>
事件捕获
<div id="box"><button>点击</button></div><script>const btn = document.querySelector('button')const box = document.querySelector('#box')btn.addEventListener('click',(e) => {console.log('btn click')},{capture: true })box.addEventListener('click',(e) => {console.log('box click')},{capture: true })</script>
输出（和冒泡顺序相反）
box clickbtn click
事件委托
利用事件冒泡可以实现事件委托，简化代码
简单的事件监听
<div id="box"><button id="buttonA">点击A</button><button id="buttonB">点击B</button></div><script>const buttonA = document.querySelector('#buttonA')const buttonB = document.querySelector('#buttonB')buttonA.addEventListener('click', (e) => {console.log('buttonA click')})buttonB.addEventListener('click', (e) => {console.log('buttonB click')})</script>
使用事件委托，仅用监听外层元素的事件
<div id="box"><button id="buttonA">点击A</button><button id="buttonB">点击B</button></div><script>const box = document.querySelector('#box')box.addEventListener('click', (e) => {// 事件触发元素 buttonA / buttonBconsole.log(e.target)// 获取元素id属性let targetId = e.target.getAttribute('id')console.log(targetId)// 处理元素 boxconsole.log(e.currentTarget)})</script>
参考文章
如何将事件作为参数传递给 JavaScript 中的内联事件处理程序？
js：javascript中的事件体系：常见事件 事件监听 事件移除 事件冒泡 事件捕获 事件委托 阻止事件
