JS 事件

网站

JavaScript 事件

事件介绍 - JavaScript | MDN

EventTarget: addEventListener() 方法 | MDN

引入

用户点击按钮、输入文字、滚动页面时，浏览器会产生一个事件。

JS 可以监听这些事件，在事件发生时执行特定代码，从而让页面根据用户操作发生变化。

正文

定义

定义

事件是用户或浏览器发生某个动作时触发的行为，JS 可以监听这些事件并执行相应代码。

常见的事件：点击、输入、提交、滚动、鼠标移动等。

语法

使用 addEventListener() 监听事件。

元素.addEventListener("事件类型", function () {
  // 事件发生时执行的代码
});

例如：

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

const btn = document.querySelector("#btn");
 
btn.addEventListener("click", function () {
  console.log("按钮被点击了");
});

"click" 表示点击事件，第二个参数是回调函数，点击按钮时浏览器会执行这个函数。

事件监听

监听事件就是告诉浏览器：“当某个事件发生时，执行这段代码”。

<button id="submit">提交</button>

const submit = document.querySelector("#submit");
 
submit.addEventListener("click", function () {
  console.log("表单已提交");
});

这里给 #submit 按钮绑定了点击事件，用户点击时会执行回调函数。

常见事件类型

事件类型	触发时机
click	鼠标点击元素
dblclick	鼠标双击元素
input	输入框内容发生变化
change	输入框失去焦点且内容改变
submit	表单提交
keydown	键盘按键按下
keyup	键盘按键松开
mouseenter	鼠标移入元素
mouseleave	鼠标移出元素
scroll	页面或元素滚动
focus	元素获得焦点
blur	元素失去焦点

例子

点击按钮修改文字

<button id="btn">点击</button>
<p id="message">旧内容</p>

const btn = document.querySelector("#btn");
const message = document.querySelector("#message");
 
btn.addEventListener("click", function () {
  message.textContent = "新内容";
});

点击按钮后，<p> 的文字会从”旧内容”变成”新内容”。

输入框监听输入

<input id="userName" type="text">
<p id="display"></p>

const userName = document.querySelector("#userName");
const display = document.querySelector("#display");
 
userName.addEventListener("input", function () {
  display.textContent = userName.value;
});

用户每输入一个字符，<p> 里的内容就会实时更新。

监听表单提交

<form id="form">
  <input name="userName" type="text">
  <button type="submit">提交</button>
</form>

const form = document.querySelector("#form");
 
form.addEventListener("submit", function (event) {
  event.preventDefault();
  console.log("表单已提交");
});

这里 event.preventDefault() 用来阻止表单默认提交行为，防止页面刷新。

监听键盘按键

<input id="search" type="text">

const search = document.querySelector("#search");
 
search.addEventListener("keydown", function (event) {
  console.log("按下的键：" + event.key);
});

用户按下键盘时，会输出按下的键名，例如 "Enter"、"a"、"Shift"。

鼠标移入移出

<div id="box" style="width: 100px; height: 100px; background: lightblue;"></div>

const box = document.querySelector("#box");
 
box.addEventListener("mouseenter", function () {
  box.style.background = "lightcoral";
});
 
box.addEventListener("mouseleave", function () {
  box.style.background = "lightblue";
});

鼠标移入时背景变成粉色，移出时恢复蓝色。

事件对象

事件发生时，浏览器会自动传入一个事件对象，里面包含事件相关信息。

btn.addEventListener("click", function (event) {
  console.log(event);
});

常用属性：

属性	作用
event.type	事件类型，例如 "click"
event.target	触发事件的元素
event.key	按下的键盘按键（键盘事件）
event.clientX	鼠标 X 坐标（鼠标事件）
event.clientY	鼠标 Y 坐标（鼠标事件）

读取事件信息

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

const btn = document.querySelector("#btn");
 
btn.addEventListener("click", function (event) {
  console.log("事件类型：" + event.type);
  console.log("触发元素：", event.target);
});

点击按钮时，可以看到事件类型是 "click"，触发元素是 #btn 按钮。

阻止默认行为

有些元素自带默认行为，例如 <a> 点击会跳转，<form> 提交会刷新页面。

如果不希望触发默认行为，可以使用 event.preventDefault()。

<a href="https://example.com" id="link">链接</a>

const link = document.querySelector("#link");
 
link.addEventListener("click", function (event) {
  event.preventDefault();
  console.log("阻止了跳转");
});

点击链接时不会跳转，只会执行回调函数里的代码。

移除事件监听

可以使用 removeEventListener() 移除事件监听。

function handleClick() {
  console.log("按钮被点击了");
}
 
btn.addEventListener("click", handleClick);
 
btn.removeEventListener("click", handleClick);

注意：移除事件时，回调函数必须是同一个函数引用，不能是匿名函数。

事件委托

如果有多个元素需要绑定相同事件，可以把事件绑定到父元素上。

<ul id="list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

const list = document.querySelector("#list");
 
list.addEventListener("click", function (event) {
  if (event.target.tagName === "LI") {
    console.log("点击了：" + event.target.textContent);
  }
});

这里把点击事件绑定到 <ul> 上，点击任意 <li> 时都会触发。

事件委托的好处是只绑定一次事件，适合动态添加的元素。

特点

• 事件用于响应用户操作
• addEventListener() 用来监听事件
• 第一个参数是事件类型，第二个参数是回调函数
• 事件发生时，浏览器会自动调用回调函数
• 回调函数可以接收一个事件对象参数
• event.target 表示触发事件的元素
• event.preventDefault() 用来阻止默认行为
• 同一个元素可以绑定多个不同事件
• 同一个事件可以绑定多个不同函数
• 事件委托可以减少事件绑定次数

注意事项

• 监听事件前，要先确保元素已经被获取到
• 如果 JS 执行太早，元素可能还没加载，事件就绑定不上
• 回调函数中的 this 默认指向触发事件的元素
• 使用箭头函数时，this 不会指向元素，而是指向外层作用域
• input 事件会在输入时实时触发，change 事件只在失去焦点且内容改变时触发
• 移除事件时，回调函数不能是匿名函数

理解

可以把事件理解为一个通知机制。

用户做了某个操作，浏览器会通知 JS：“有个事件发生了”，JS 收到通知后就执行对应代码。

事件监听就是提前告诉浏览器：“如果发生某个事件，就执行这段代码”。

我理解事件的重点是：用户操作触发事件，JS 监听事件并执行代码。

引出

理解了事件之后，就可以结合 JS DOM API 和 JS 获取元素，实现更丰富的页面交互。

后续还可以学习 JS 定时器，让页面在特定时间自动执行操作。