JavaScript事件 - 技术栈

事件类型

JavaScript的事件处理机制是实现用户交互和页面动态响应的核心机制。它主要涉及事件的触发、传播、绑定和处理。以下是JavaScript事件处理机制的详细解析，包括事件的绑定方式、事件传播的两个阶段（捕获和冒泡），以及如何通过事件对象进行更精细的控制。

鼠标事件

鼠标事件是与鼠标操作相关的事件，常用于响应用户的鼠标交互。

click：当用户点击元素时触发。
mouseover：当鼠标移动到元素上时触发。
mouseout：当鼠标移出元素时触发。

html 复制代码

<div id="box" style="width: 100px; height: 100px; background: lightblue;">
  Hover over me!
</div>
<script>
  const box = document.getElementById("box");

  box.addEventListener("mouseover", () => {
    box.style.backgroundColor = "lightgreen";
  });

  box.addEventListener("mouseout", () => {
    box.style.backgroundColor = "lightblue";
  });
</script>

键盘事件

键盘事件用于响应用户的键盘操作。

keydown：当用户按下键盘上的任意键时触发。
keyup：当用户释放键盘上的键时触发。

js 复制代码

<input type="text" id="inputBox" placeholder="Type here...">
<script>
  const inputBox = document.getElementById("inputBox");

  inputBox.addEventListener("keydown", (event) => {
    console.log(`Key pressed: ${event.key}`);
  });
</script>

表单事件

表单事件用于处理表单相关的操作。

submit：当表单提交时触发。
input：当用户在输入框中输入内容时触发（实时验证输入）。

js 复制代码

<form id="myForm">
  <input type="text" id="inputBox" placeholder="Type here...">
  <button type="submit">Submit</button>
</form>
<script>
  const form = document.getElementById("myForm");

  form.addEventListener("submit", (event) => {
    event.preventDefault(); // 阻止表单默认提交行为
    console.log("Form submitted!");
  });

  const inputBox = document.getElementById("inputBox");
  inputBox.addEventListener("input", (event) => {
    console.log(`Input value: ${event.target.value}`);
  });
</script>

事件处理机制

事件绑定

事件绑定是将事件处理器（函数）绑定到元素上，当事件触发时，绑定的处理器会被自动调用。

`addEventListener`

动态绑定事件处理函数。

语法：

js 复制代码

element.addEventListener(eventType, handler, options);

eventType ：事件类型（如click、mouseover）。
handler：事件触发时执行的回调函数。
options ：可选参数，用于控制事件的绑定行为（如是否捕获）。 示例：

js 复制代码

const button = document.getElementById("myButton");

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

旧式绑定

旧式绑定通过直接设置元素的事件属性（如onclick）来实现。

缺点：

每个元素的每个事件只能绑定一个处理器，后绑定的会覆盖先绑定的。
不支持事件传播的控制。

示例：

js 复制代码

<button id="myButton" onclick="console.log('Button clicked!')">Click me</button>

事件传播

事件传播是指事件在DOM树的传播过程中

1、捕获阶段

捕获阶段是指事件从doucument开始，逐级向下传播到目标元素的过程。捕获阶段主要用于事件到达目标元素之前的的处理

2、冒泡阶段

冒泡阶段是指事件从目标i元素开始，逐级向上传播到document的过程。冒泡阶段是最常用的事件传播阶段，许多事件处理器都依赖于冒泡

3、默认行为

某些事件具有默认行为。例如：

点击链接时，浏览器会跳转到指定的URL。
提交表单时，浏览器会将表单数据发送到服务器。

默认行为可以通过event.preventDefault()方法阻止。

js 复制代码

<a href="https://example.com" id="myLink">Click me</a>
<script>
  const link = document.getElementById("myLink");

  link.addEventListener("click", (event) => {
    event.preventDefault(); // 阻止链接的默认跳转行为
    console.log("Link clicked, but navigation is prevented.");
  });
</script>

4、阻止事件传播

event.stopPropagation() ：阻止事件继续传播（捕获或冒泡）。
event.stopImmediatePropagation() ：阻止事件传播，并阻止当前元素上的其他事件处理器执行。

js 复制代码

<div id="outer">
  <button id="inner">Click me</button>
</div>
<script>
  const outer = document.getElementById("outer");
  const inner = document.getElementById("inner");

  outer.addEventListener("click", () => {
    console.log("Outer div clicked");
  });

  inner.addEventListener("click", (event) => {
    console.log("Inner button clicked");
    event.stopPropagation(); // 阻止事件冒泡到`outer`
  });
</script>

事件委托

事件委托是利用事件冒泡机制的一种高效事件处理方式。它通过将事件处理器绑定到父元素上，而不是直接绑定到子元素上，从而减少事件处理器的数量，提高性能。

原理：

当事件触发时，它会逐级向上传播到绑定事件的父元素。父元素可以通过event.target属性判断实际触发事件的子元素。

js 复制代码

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<script>
  const list = document.getElementById("list");

  list.addEventListener("click", (event) => {
    if (event.target.tagName === "LI") {
      console.log(`You clicked on: ${event.target.textContent}`);
    }
  });
</script>

事件对象

事件对象（event）是事件触发时传递给事件处理器的参数，包含了事件的详细信息。通过事件对象，你可以获取事件的类型、触发事件的元素、事件的坐标等信息，并控制事件的行为。

1 常用属性和方法

event.target：触发事件的元素。
event.preventDefault() ：阻止默认行为。
event.currentTarget：绑定事件的元素。
event.stopPropagation() ：阻止事件传播。
event.type ：事件类型（如click、mouseover）。
event.clientX、event.clientY：鼠标相对于视口的坐标。
event.key（键盘事件）：按键的键值。

js 复制代码

<button id="myButton">Click me</button>
<script>
  const button = document.getElementById("myButton");

  button.addEventListener("click", (event) => {
    console.log(`Event type: ${event.type}`);
    console.log(`Triggered by: ${event.target.tagName}`);
    console.log(`Bound to: ${event.currentTarget.tagName}`);
  });
</script>

总结

事件绑定 ：通过addEventListener将事件处理器绑定到元素上。
事件传播：事件在DOM树中传播的过程，分为捕获阶段和冒泡阶段。
事件委托：利用事件冒泡机制，将事件处理器绑定到父元素上，减少事件处理器的数量。
事件对象：事件触发时传递给处理器的对象，用于获取事件信息和控制事件行为。