JavaScript基础-注册事件（绑定事件）

最新推荐文章于 2025-06-10 21:27:03 发布

咖啡の猫

最新推荐文章于 2025-06-10 21:27:03 发布

阅读量932

点赞数 26

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_51626500/article/details/148485173

版权

一、前言

在网页交互中，事件驱动 是用户与页面互动的核心机制。无论是点击按钮、输入文本、还是滚动页面，都离不开 JavaScript 对这些行为的监听与响应。

本文将带你深入了解 JavaScript 中的事件注册机制，包括：

什么是事件？
如何为元素绑定事件？
不同的事件绑定方式及其优缺点；
事件冒泡与捕获；
实际开发中的常见使用场景；
推荐的最佳实践；

通过这篇文章，你将掌握如何正确地为 HTML 元素绑定事件，实现更灵活、高效的前端交互逻辑。

二、什么是事件？

在 JavaScript 中，事件（Event） 是浏览器或用户对页面做出的某种操作，例如：

事件类型	触发条件
`click`	鼠标点击元素
`input`	用户在输入框输入内容
`submit`	表单提交
`keydown`	键盘按键按下
`scroll`	页面或元素滚动

我们可以通过 JavaScript 监听这些事件，并在事件发生时执行相应的处理函数。

三、事件绑定的三种方式

✅ 方式一：HTML 属性绑定（不推荐）

<button onclick="sayHello()">点击我</button>

<script>
function sayHello() {
  alert('Hello, world!')
}
</script>

📌 特点：

简单直观，适合初学者理解；
耦合严重：HTML 和 JS 混在一起，不利于维护；
不推荐用于现代项目。

✅ 方式二：DOM 元素属性绑定（on+事件名）

<button id="btn">点击我</button>

<script>
const btn = document.getElementById('btn')

btn.onclick = function () {
  alert('按钮被点击了')
}
</script>

📌 特点：

将 JS 从 HTML 中分离出来；
只能绑定一个函数，重复赋值会覆盖；
适用于小型项目或简单功能。

✅ 方式三：使用 `addEventListener()`（推荐方式）

<button id="btn">点击我</button>

<script>
const btn = document.getElementById('btn')

function handleClick() {
  alert('按钮被点击了')
}

// 添加监听器
btn.addEventListener('click', handleClick)

// 可以继续添加多个监听器
btn.addEventListener('click', () => {
  console.log('另一个点击事件')
})
</script>

📌 特点：

支持绑定多个事件处理函数；
更加灵活，便于模块化开发；
支持设置捕获阶段；
是现代开发中最推荐的方式。

四、事件冒泡与事件捕获

JavaScript 中的事件传播分为三个阶段：

捕获阶段（Capture Phase）
目标阶段（Target Phase）
冒泡阶段（Bubble Phase）

你可以通过 addEventListener() 的第三个参数控制监听发生在哪个阶段：

element.addEventListener('click', handler, true) // 捕获阶段
element.addEventListener('click', handler, false) // 冒泡阶段（默认）

📌 示例说明：

<div id="outer">
  外层 div
  <div id="inner">内层 div</div>
</div>

<script>
document.getElementById('outer').addEventListener('click', () => {
  console.log('外层点击 - 冒泡')
})

document.getElementById('outer').addEventListener('click', () => {
  console.log('外层点击 - 捕获')
}, true)

document.getElementById('inner').addEventListener('click', () => {
  console.log('内层点击 - 冒泡')
})
</script>

📌 输出结果顺序：

外层点击 - 捕获
内层点击 - 冒泡
外层点击 - 冒泡

五、移除事件监听器

为了避免内存泄漏或重复绑定，我们可以使用 removeEventListener() 来移除监听器。

btn.removeEventListener('click', handleClick)

📌 注意事项：

必须传入相同的函数引用才能成功移除；
匿名函数无法移除；
常用于组件卸载、生命周期结束时清理资源。

六、事件委托（Event Delegation）

当有多个子元素需要绑定相同事件时，我们可以通过“事件委托”来优化性能。

✅ 原理：利用事件冒泡，将事件绑定到父元素上，再根据 `event.target` 判断具体触发的是哪个子元素。

<ul id="list">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

<script>
document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('你点击了:', e.target.textContent)
  }
})
</script>

📌 优点：

减少事件监听器数量；
动态新增元素也能自动生效；
提升性能，尤其适用于大型列表或表格。

七、常用事件类型一览表

类型	描述
`click`	鼠标点击
`dblclick`	鼠标双击
`mouseenter / mouseleave`	鼠标进入/离开元素
`keydown / keyup`	键盘按键按下/松开
`input`	输入框内容变化
`change`	表单控件值改变（如 select、input[type=checkbox]）
`submit`	表单提交
`scroll`	页面滚动
`load`	页面或图片加载完成
`resize`	浏览器窗口大小变化

八、事件对象（Event Object）

每个事件回调函数都会接收一个事件对象（event），它包含了丰富的信息。

btn.addEventListener('click', function(e) {
  console.log('事件对象:', e)
  console.log('触发元素:', e.target)
  console.log('当前绑定元素:', e.currentTarget)
  console.log('鼠标坐标:', e.clientX, e.clientY)
})

📌 常用属性：