FireFox JavaScript全局Event对象

概述

在 FireFox JavaScript 中，Event 对象是一个全局的对象，它代表着一个事件，包含了事件的相关信息，如事件类型，目标元素等。我们可以使用 Event 对象来获取事件信息。

使用方法

获取事件类型

在事件处理函数中，我们可以使用 event.type 属性来获取事件的类型，例如：

function handleClick(event) {
  console.log(event.type); //点击鼠标时输出 "click"
}

document.addEventListener("click", handleClick);

阻止默认行为

有时我们需要阻止事件的默认行为，例如阻止表单的提交或者链接的跳转。这时我们可以使用 event.preventDefault() 方法，例如：

function handleClick(event) {
  event.preventDefault();
  console.log("链接被点击，但不会跳转。");
}

document.querySelector("a").addEventListener("click", handleClick);

阻止事件冒泡

在 DOM 结构中，事件是可以冒泡的，即事件会从发生事件的最内层元素向外层元素逐级传播，直到传播到 document 对象。这时，我们有时需要阻止事件冒泡，避免事件传播到外层元素。这时，我们可以使用 event.stopPropagation() 方法，例如：

function handleClick(event) {
  event.stopPropagation();
  console.log("内层 DIV 被点击，但不会触发外层 DIV 的点击事件。");
}

document.querySelector("#inner-div").addEventListener("click", handleClick);
document.querySelector("#outer-div").addEventListener("click", function(event) {
  console.log("外层 DIV 被点击。");
});

示例

示例一

以下是一个利用 Event 对象的示例，当点击按钮时，会弹出一个提示框，显示出鼠标的坐标。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Event 示例</title>
</head>
<body>
  <button id="show-coordinates">显示鼠标坐标</button>

  <script>
    document.querySelector("#show-coordinates").addEventListener("click", function(event) {
      alert("鼠标坐标 (" + event.clientX + ", " + event.clientY + ")");
    });
  </script>
</body>
</html>

示例二

以下是一个利用 Event 对象的示例，当点击链接时，会弹出一个提示框，阻止链接跳转。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Event 示例</title>
</head>
<body>
  <a href="https://www.baidu.com">点我跳转</a>

  <script>
    document.querySelector("a").addEventListener("click", function(event) {
      event.preventDefault();
      alert("链接被点击，但是不会跳转。");
    });
  </script>
</body>
</html>