什么是javascript事件_如何为元素添加事件？-js教程-PHP中文网

什么是javascript事件_如何为元素添加事件？

夜晨

发布： 2025-12-18 22:58:02

原创

598人浏览过

JavaScript事件是用户或浏览器执行的动作，常见类型有click、input、change、keydown/keyup、submit、load、DOMContentLoaded；添加方式包括内联属性、DOM属性赋值和addEventListener（推荐），需注意元素存在时机、事件委托、this指向及内存泄漏。

什么是javascript事件_如何为元素添加事件？

JavaScript 事件是用户或浏览器自身执行的特定动作（比如点击、输入、页面加载），触发后可运行一段代码来响应。为元素添加事件，核心就是把函数“绑定”到某个元素的某个事件上。

常见的事件类型有哪些？

日常开发中高频使用的事件包括：

click：鼠标单击元素
input：表单元素内容变化（实时响应，比 change 更灵敏）
change：表单元素失去焦点且值已改变（如 select 选中、input 失去焦点）
keydown / keyup：键盘按键按下或抬起
submit：表单提交（常用于阻止默认提交行为）
load：页面或图片等资源加载完成
DOMContentLoaded：HTML 文档解析完成（不等样式、图片）

三种主流添加事件的方式

方式不同，适用场景和细节有差异，选对很重要：

HTML 内联事件属性（简单但不推荐）：

缺点：逻辑与结构混在一起，不易维护，无法复用函数，也不支持事件对象精细控制。
DOM 元素属性赋值（仅支持单个事件）：
const btn = document.querySelector('button');
btn.onclick = function() { console.log('被点了'); };
注意：重复赋值会覆盖前一个，不能同时绑定多个 click 响应函数。
addEventListener() 方法（推荐标准做法）：
btn.addEventListener('click', function(e) {
console.log('事件对象:', e);
e.preventDefault(); // 阻止默认行为
});
优势：可多次调用绑定多个同类型事件；支持第三个参数控制捕获/冒泡阶段；可精确移除（用 removeEventListener 配合相同函数引用）。