JavaScript 事件是什么

你写网页到现在，页面打开后内容就固定不变了。但真实网站是活的，用户点击按钮、在输入框打字、提交表单，页面都要有回应。让页面活起来的机制就是事件。

事件（event）是浏览器发出的信号，表示”用户做了某件事”。JavaScript 依靠事件来响应用户的操作，这也是 JavaScript 做网页交互最核心的能力。

事件驱动编程

程序有两大类写法。顺序执行是第一种，代码从上到下逐行跑完。事件驱动是第二种，程序不干等，而是先登记好”我关心哪个动作”，用户做出动作后浏览器触发事件，并调用登记过的函数。

门铃是一个贴切的比喻。门铃装好后不需要一直守着，客人按铃时门铃响，你听到铃声再去开门。对应到程序里，按铃是事件，铃声是通知，开门是处理函数。用户点击按钮就是按铃，浏览器触发 click 事件就是铃声响起，你写的函数就是开门这个动作。

事件驱动编程包括三个要素。事件源是事件发生在哪个元素上。事件类型是发生了什么动作。事件处理函数是事件发生时执行的代码。

常见事件

浏览器支持非常多的事件，先认识四个最常见的类型。

click 点击事件

click 是最常用的事件，用户按下并松开鼠标左键时触发。按钮、链接、卡片都可以绑定。

<button id="btn">点我</button>
<script>
  const btn = document.getElementById('btn')
  btn.addEventListener('click', () => {
    console.log('按钮被点击了')
  })
</script>

mouseenter 与 mouseleave

mouseenter 在鼠标进入元素时触发，mouseleave 在鼠标离开元素时触发。这两个事件常用来做悬浮效果。

<div id="box" style="width: 200px; height: 100px; background: #eee;">悬停我</div>
<script>
  const box = document.getElementById('box')
  box.addEventListener('mouseenter', () => {
    box.style.background = 'lightgreen'
  })
  box.addEventListener('mouseleave', () => {
    box.style.background = '#eee'
  })
</script>

input 输入事件

input 在输入框内容变化时触发，每敲一个字符都会触发一次。它常配合实时搜索和字数统计使用。

<input id="name" type="text" placeholder="输入你的名字">
<p id="tip"></p>
<script>
  const input = document.getElementById('name')
  const tip = document.getElementById('tip')
  input.addEventListener('input', () => {
    tip.textContent = `当前输入的内容是 ${input.value}`
  })
</script>

submit 表单提交事件

submit 在表单提交时触发，绑定在 form 元素上而不是提交按钮上。点击表单里的提交按钮或者按回车都会触发。

<form id="login">
  <input type="text" placeholder="用户名">
  <button type="submit">登录</button>
</form>
<script>
  const form = document.getElementById('login')
  form.addEventListener('submit', () => {
    console.log('表单提交了')
  })
</script>

用 addEventListener 绑定事件

绑定事件最推荐的方式是 addEventListener，格式如下。

元素.addEventListener('事件类型', 处理函数)

第一个参数是事件类型字符串，第二个参数是事件触发时要执行的函数。下面是一个完整例子，点击按钮修改页面文字。

<button id="change">换个名字</button>
<h2 id="title">我是默认标题</h2>
<script>
  const btn = document.getElementById('change')
  const title = document.getElementById('title')
  btn.addEventListener('click', () => {
    title.textContent = '标题被按钮修改了'
  })
</script>

这里用到了获取 DOM 元素和操作 DOM 内容与属性的知识。点击按钮后监听函数执行，页面文字随之改变。

为什么不推荐 onclick 属性

老教程里常见另一种写法，直接在 HTML 里写 onclick。

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

这种写法有两个明显问题。第一是 onclick 只能绑定一个处理函数，第二次赋值会把第一次覆盖掉。第二是 HTML 与 JS 耦合在一起，标签里混入逻辑，代码分散难维护。

addEventListener 没有这两个问题。它可以给同一个元素的同一个事件绑定多个函数，函数按绑定顺序依次执行。

const btn = document.getElementById('btn')
btn.addEventListener('click', () => {
  console.log('第一个函数')
})
btn.addEventListener('click', () => {
  console.log('第二个函数')
})

移除监听

不需要的监听可以用 removeEventListener 移除，参数与添加时完全一致，包括同一个函数引用。

function handler() {
  console.log('被调用')
}
btn.addEventListener('click', handler)
btn.removeEventListener('click', handler)

移除之后点击按钮不再触发 handler。注意这里传的是函数名而不是带括号的调用，带括号会把函数的返回值传进去，两者不是一回事。

小结

事件是浏览器发出的用户操作信号，JavaScript 靠它实现页面交互。事件驱动编程由事件源、事件类型、事件处理函数三个要素组成。常见事件包括 click、mouseenter、mouseleave、input、submit。绑定事件推荐用 addEventListener，它支持多个处理函数且不污染 HTML。removeEventListener 可以移除不需要的监听。