JavaScript 事件

事件是浏览器中发生的"动作"，例如点击按钮、鼠标移过图片、按下键盘。JavaScript 能够监听事件并执行对应函数，从而让页面产生交互，网页之所以"活"起来靠的就是事件处理。

事件的三个要素

一次事件包含三部分：事件源（发生在哪个元素上）、事件类型（发生了什么动作）、处理函数（触发后执行什么）。常用事件类型：

事件	触发时机
click	单击元素
mouseover / mouseout	鼠标移入 / 移出
keydown	按下键盘按键
load	页面或图片加载完成
change	表单控件的值被修改

绑定方式一：HTML 属性

直接在标签中写 onclick 属性即可，代码最简但结构与行为混杂，仅适合小演示：

<button onclick="alert('你好')">点我</button>

绑定方式二：DOM 属性

给元素对象直接赋值事件属性，下面的示例需放进 HTML 页面中运行：

const btn = document.getElementById("myBtn");
btn.onclick = function () {
  console.log("按钮被点击了"); // 输出：按钮被点击了
};

这种写法同一个事件只能绑定一个函数，后写的会覆盖先写的。

绑定方式三：addEventListener（推荐）

const btn = document.getElementById("myBtn");
function show() {
  console.log("执行 show"); // 输出：执行 show
}
function other() {
  console.log("执行 other"); // 输出：执行 other
}
btn.addEventListener("click", show);
btn.addEventListener("click", other);   // 两个函数都会执行
btn.removeEventListener("click", other); // 移除 other，之后只执行 show

同一事件可以挂多个处理函数，还支持 removeEventListener 解绑，实际项目推荐这种方式。

事件对象 event

处理函数会自动收到一个事件对象，携带类型、目标元素等信息：

const btn = document.getElementById("myBtn");
btn.addEventListener("click", function (event) {
  console.log(event.type);   // 输出：click
  console.log(event.target); // 输出：被点击的按钮元素
});

小结

事件由事件源、事件类型、处理函数三部分组成。优先用 addEventListener 绑定事件，配合 event 对象获取触发细节，就能写出可交互的网页。