事件概述-事件概念-常见事件类型介绍-前端-Javascript-书闪BookChips

100 - 事件概述 - 事件概念 - 常见事件类型介绍

作者：

贺及楼

成为作者

更新日期：2025-02-21 18:59:22

事件概述 - 事件概念 - 常见事件类型介绍

一、事件概念

在前端开发中，事件是 JavaScript 与 HTML 文档交互的基础机制。简单来说，事件就是文档或浏览器窗口中发生的特定交互瞬间。当这些瞬间发生时，我们可以编写代码来对其做出响应，从而实现动态的网页效果。

举个生活中的例子，把网页想象成一个热闹的派对现场，而事件就是派对上发生的各种事情，比如有人敲门、音乐响起、有人摔倒等。JavaScript 就像是派对的组织者，当这些事情发生时，组织者可以采取相应的行动，比如开门、调整音乐音量、扶起摔倒的人。

在 HTML 文档中，事件可以由用户的操作触发，比如点击按钮、输入文本、滚动页面等；也可以由浏览器自身触发，比如页面加载完成、窗口大小改变等。

二、事件绑定

在 JavaScript 中，要对事件做出响应，就需要将事件与相应的处理函数进行绑定。下面介绍几种常见的事件绑定方式。

1. HTML 内联事件处理程序

这是一种最简单的事件绑定方式，直接在 HTML 标签中使用事件属性来指定事件处理代码。

<!DOCTYPE html>
<html lang="en">
<body>
  <button onclick="alert('你点击了我！')">点击我</button>
</body>
</html>

在这个例子中，当用户点击按钮时，会弹出一个提示框显示“你点击了我！”。不过，这种方式会将 HTML 和 JavaScript 代码混合在一起，不利于代码的维护和复用，不建议在大型项目中使用。

2. DOM0 级事件处理程序

通过 JavaScript 代码获取 DOM 元素，然后直接为元素的事件属性赋值一个函数。

<!DOCTYPE html>
<html lang="en">
<body>
  <button id="myButton">点击我</button>
  <script>
    const button = document.getElementById('myButton');
    button.onclick = function () {
      alert('你点击了我！');
    };
  </script>
</body>
</html>

这种方式将 HTML 和 JavaScript 代码分离，提高了代码的可维护性，但一个元素的同一个事件只能绑定一个处理函数。

3. DOM2 级事件处理程序

使用 addEventListener 方法来绑定事件处理函数，这种方式更加灵活，可以为同一个元素的同一个事件绑定多个处理函数。

<!DOCTYPE html>
<html lang="en">
<body>
  <button id="myButton">点击我</button>
  <script>
    const button = document.getElementById('myButton');
    button.addEventListener('click', function () {
      alert('第一次点击响应');
    });
    button.addEventListener('click', function () {
      alert('第二次点击响应');
    });
  </script>
</body>
</html>

当用户点击按钮时，会依次弹出两个提示框。

三、常见事件类型介绍

1. 鼠标事件

鼠标事件是最常见的事件类型之一，用于处理用户与鼠标的交互。
| 事件名称 | 描述 | 示例代码 |
| —— | —— | —— |
| click | 当用户点击鼠标左键时触发 |

<!DOCTYPE html>
<html lang="en">
<body>
  <button id="clickButton">点击我</button>
  <script>
    const clickButton = document.getElementById('clickButton');
    clickButton.addEventListener('click', function () {
      alert('你点击了按钮');
    });
  </script>
</body>
</html>

| dblclick | 当用户双击鼠标左键时触发 |

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="doubleClickDiv">双击我</div>
  <script>
    const doubleClickDiv = document.getElementById('doubleClickDiv');
    doubleClickDiv.addEventListener('dblclick', function () {
      alert('你双击了这个区域');
    });
  </script>
</body>
</html>

| mouseover | 当鼠标指针移动到元素上方时触发 |

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="mouseOverDiv" style="width: 100px; height: 100px; background-color: lightblue;">鼠标移上来</div>
  <script>
    const mouseOverDiv = document.getElementById('mouseOverDiv');
    mouseOverDiv.addEventListener('mouseover', function () {
      this.style.backgroundColor = 'lightgreen';
    });
  </script>
</body>
</html>

| mouseout | 当鼠标指针移出元素时触发 |

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="mouseOutDiv" style="width: 100px; height: 100px; background-color: lightblue;">鼠标移上来再移走</div>
  <script>
    const mouseOutDiv = document.getElementById('mouseOutDiv');
    mouseOutDiv.addEventListener('mouseout', function () {
      this.style.backgroundColor = 'lightblue';
    });
  </script>
</body>
</html>

2. 键盘事件

键盘事件用于处理用户与键盘的交互。
| 事件名称 | 描述 | 示例代码 |
| —— | —— | —— |
| keydown | 当用户按下键盘上的任意键时触发 |

<!DOCTYPE html>
<html lang="en">
<body>
  <input type="text" id="keyInput">
  <script>
    const keyInput = document.getElementById('keyInput');
    keyInput.addEventListener('keydown', function (event) {
      console.log('你按下了键：', event.key);
    });
  </script>
</body>
</html>

| keyup | 当用户释放键盘上的任意键时触发 |

<!DOCTYPE html>
<html lang="en">
<body>
  <input type="text" id="keyUpInput">
  <script>
    const keyUpInput = document.getElementById('keyUpInput');
    keyUpInput.addEventListener('keyup', function (event) {
      console.log('你释放了键：', event.key);
    });
  </script>
</body>
</html>

| keypress | 当用户按下并释放一个可打印字符键时触发（不包括功能键） |

<!DOCTYPE html>
<html lang="en">
<body>
  <input type="text" id="keyPressInput">
  <script>
    const keyPressInput = document.getElementById('keyPressInput');
    keyPressInput.addEventListener('keypress', function (event) {
      console.log('你输入了字符：', String.fromCharCode(event.charCode));
    });
  </script>
</body>
</html>

3. 表单事件

表单事件用于处理用户与表单元素的交互。
| 事件名称 | 描述 | 示例代码 |
| —— | —— | —— |
| submit | 当用户提交表单时触发 |

<!DOCTYPE html>
<html lang="en">
<body>
  <form id="myForm">
    <input type="text" name="username">
    <input type="submit" value="提交">
  </form>
  <script>
    const myForm = document.getElementById('myForm');
    myForm.addEventListener('submit', function (event) {
      event.preventDefault(); // 阻止表单默认提交行为
      alert('表单已提交');
    });
  </script>
</body>
</html>

| change | 当表单元素的值发生改变并失去焦点时触发 |

<!DOCTYPE html>
<html lang="en">
<body>
  <input type="text" id="changeInput">
  <script>
    const changeInput = document.getElementById('changeInput');
    changeInput.addEventListener('change', function () {
      alert('输入框的值已改变');
    });
  </script>
</body>
</html>

| input | 当表单元素的值发生改变时立即触发 |

<!DOCTYPE html>
<html lang="en">
<body>
  <input type="text" id="inputInput">
  <script>
    const inputInput = document.getElementById('inputInput');
    inputInput.addEventListener('input', function () {
      console.log('输入框当前的值：', this.value);
    });
  </script>
</body>
</html>

4. 窗口事件

窗口事件用于处理与浏览器窗口相关的交互。
| 事件名称 | 描述 | 示例代码 |
| —— | —— | —— |
| load | 当页面或图像加载完成时触发 |

<!DOCTYPE html>
<html lang="en">
<body>
  <img src="example.jpg" id="myImage">
  <script>
    const myImage = document.getElementById('myImage');
    myImage.addEventListener('load', function () {
      alert('图像加载完成');
    });
    window.addEventListener('load', function () {
      alert('页面加载完成');
    });
  </script>
</body>
</html>

| resize | 当浏览器窗口大小改变时触发 |

<!DOCTYPE html>
<html lang="en">
<body>
  <script>
    window.addEventListener('resize', function () {
      console.log('窗口大小已改变，当前宽度：', window.innerWidth, '当前高度：', window.innerHeight);
    });
  </script>
</body>
</html>

| scroll | 当用户滚动页面时触发 |

<!DOCTYPE html>
<html lang="en">
<body style="height: 2000px;">
  <script>
    window.addEventListener('scroll', function () {
      console.log('页面滚动了，当前滚动距离：', window.scrollY);
    });
  </script>
</body>
</html>

四、总结

事件是前端开发中非常重要的概念，通过合理地使用事件和事件处理函数，我们可以实现各种动态的网页效果，提升用户体验。不同类型的事件适用于不同的场景，开发者需要根据具体需求选择合适的事件类型进行处理。同时，要注意事件绑定的方式，尽量采用 addEventListener 方法，以提高代码的灵活性和可维护性。