一、什么是事件对象

事件对象
当事件被触发时（如onclick事件），浏览器会自动创建一个名为event的JavaScript对象，这个对象存在于window对象中。window.event(window可以省略)表示当前正在处理的事件的详细信息（如事件类型（click、mousemove等）、目标元素、鼠标位置、按键状态等）。

二、事件对象的作用

事件对象可以用于访问事件的类型、目标元素、鼠标位置、按键状态等信息，以及阻止事件的默认行为或停止事件的传播。

三、如何使用事件对象

3.1、行内式绑定事件

//事件被触发后，event对象被创建在window上，window可以省略
<div id="box" onclick="doClick(window.event)"></div>
<script>
      function doClick(event) {
        console.log(event);
      }
</script>

注意-----------------------------

doClick(window.event)这里的括号和window.event都不可省略，这是因为内联模式下，事件直接执行引号内的代码。

以下方式方法既不能调用doClick方法，也不能接收到事件参数

<div id="box" onclick="doClick"></div>
<script>
      function doClick(event) {
        console.log(event);
      }
</script>

---

3.2、属性绑定事件

在属性绑定事件的方式中，浏览器会将事件对象event传递给事件处理函数（handler）

      // 获取页面中id为box的元素
      var box = document.getElementById("box");
      box.onclick = function (event) {
        //event就是事件触发的时候浏览器传递给事件处理函数
        console.log(event);
      };

3.3、addEventListener绑定事件

addEventListener介绍

addEventListener() 方法用于向指定元素添加事件处理程序（事件句柄handler）。

参数1：enent（事件类型） 必须。字符串，指定事件名。
注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

参数2：function 必须。指定要事件触发时执行的函数。
注意：事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。

参数3：useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

• true - 事件处理程序（事件句柄）在捕获阶段执行
• false- false- 默认。事件处理程序（事件句柄）在冒泡阶段执行

// 给一个按钮添加点击事件处理程序
const myButton = document.querySelector("#my-button");

myButton.addEventListener("click", function (event) {
  console.log(event.type); // 获取事件类型（click）
  console.log(event.target); // 获取目标元素（myButton）
});

在上面的代码中，当按钮被单击时，浏览器将自动创建一个事件对象event，并将其传递给事件监听器函数的第二个参数。我们可以通过访问event对象的属性来获取有关事件的信息。

例如，使用event.type可以获取事件类型，而使用event.target可以获取事件的目标元素。

四、阻止默认行为

有些事件具有默认行为，例如单击链接将导航到链接的URL，按下回车键将提交表单等。在某些情况下，我们可能需要取消事件的默认行为。可以使用事件对象的preventDefault()方法来阻止事件的默认行为。

const myLink = document.querySelector('#my-link');
myLink.addEventListener('click', function(event) {
  event.preventDefault();  // 阻止单击链接的默认行为
});

五、停止事件传播

在JavaScript中，事件通常会在DOM树中沿着从子元素到祖先元素的路径进行传播（冒泡）。这意味着，当您单击一个<button>元素时，该按钮的父级元素也会收到单击事件。

在某些情况下，您可能需要仅响应事件的特定元素，而取消事件对其祖先元素的进一步传播。可以使用事件对象的stopPropagation()方法来停止事件传播。

const container = document.querySelector('#my-container');
container.addEventListener('click', function(event) {
  console.log('Clicked the container!');
});
 
const myButton = document.querySelector('#my-button');
myButton.addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件传播到父元素
  console.log('Clicked the button!');
});

在上述代码中，我们用stopPropagation()方法阻止了事件传播到容器元素，因此单击按钮时，只会显示Clicked the button!而不会显示Clicked the container!。

六、事件对象的属性和方法总结

JavaScript中的事件对象是一个非常有用的工具，可以在事件处理程序中访问和操作许多方面的事件信息。下面是常用的事件对象属性和方法的总结：

• event.type - 获取事件类型（例如，"click"、"mousedown"等）。
• event.target - 获取目标元素（即发出事件的元素）。
• event.preventDefault() - 取消事件的默认行为。
• event.stopPropagation() - 停止事件在DOM树中的传播。
• event.clientX和event.clientY - 获取鼠标光标的坐标。
• event.keyCode - 获取按下的键的键码。

总之，了解事件对象的相关属性和方法可以帮助我们更好地理解和操作JavaScript中的事件。我们可以根据需要使用它们来执行特定的操作，并确保一个可交互的和响应式的用户体验。