事件对象 | 浮城

概念

事件对象是JavaScript中与事件相关的特殊对象，它包含有关事件的详细信息，例如事件类型、触发元素、鼠标位置等。事件对象通常在事件触发时由浏览器自动生成，并作为参数传递给事件处理函数。

当您在网页上点击按钮、移动鼠标、敲击键盘或执行其他交互操作时，浏览器会创建一个特殊的对象，这就是事件对象。这个对象包含有关发生的事件的所有信息。

事件对象就像一本小册子，里面记录了事件的一切。它告诉您发生的是什么类型的事件（例如，点击、鼠标移动、键盘按下等），事件发生在哪个元素上，以及事件的一些其他细节，比如鼠标的位置或按下的键。

举个例子，当您点击一个按钮时，浏览器会创建一个事件对象，这个对象会告诉您：“嘿，有人点击了这个按钮，按钮的名字是‘OK’，发生在页面的顶部，鼠标在按钮的坐标是（100, 50）”。

type属性：表示事件的类型，例如”click”、”keydown”等。
target属性：表示触发事件的元素，即事件的目标元素。
currentTarget属性：表示当前正在执行事件处理程序的元素，通常是绑定了事件处理程序的元素。
eventPhase属性：表示事件的当前阶段，可能是捕获阶段、目标阶段或冒泡阶段。
preventDefault()方法：用于取消事件的默认行为。例如，在链接上点击时，可以使用它来阻止浏览器跳转到链接的URL。
stopPropagation()方法：用于停止事件在DOM树中的传播，阻止事件进一步冒泡或捕获。
stopImmediatePropagation()方法：与stopPropagation()类似，但还可以阻止相同元素上其他事件处理程序的执行。
bubbles属性：表示事件是否冒泡。如果为true，则事件会在触发元素后向上传播到DOM树。
clientX和clientY属性：表示事件发生时鼠标指针的水平和垂直位置。
keyCode属性：对于键盘事件，表示按下的键的键码。

访问事件类型： 你可以使用事件对象的 type 属性来确定事件的类型。例如，如果你想知道用户点击了哪个按钮，你可以检查事件对象的 type 属性是否等于 “click”。
1
2
3
4
5
element.addEventListener('click', function(event) {
if (event.type === 'click') {
// 处理点击事件
}
});
阻止默认行为： 使用事件对象的 preventDefault() 方法可以阻止事件的默认行为。例如，你可以在链接的点击事件处理程序中使用它来阻止链接跳转到新页面。
1
2
3
element.addEventListener('click', function(event) {
event.preventDefault(); // 阻止链接的默认行为
});
取消事件冒泡： 通过调用事件对象的 stopPropagation() 方法，你可以阻止事件冒泡，即事件不会向上层元素传播。
1
2
3
element.addEventListener('click', function(event) {
event.stopPropagation(); // 阻止事件冒泡
});

获取目标元素： 事件对象的 target 属性指向触发事件的元素。你可以使用它来访问或操作触发事件的元素。

element.addEventListener('click', function(event) {
  var clickedElement = event.target;
  // 使用 clickedElement 进行操作
});

鼠标位置： 如果事件与鼠标有关，你可以使用事件对象的 clientX 和 clientY 属性获取鼠标在视口中的坐标位置。

element.addEventListener('mousemove', function(event) {
  var mouseX = event.clientX;
  var mouseY = event.clientY;
  // 处理鼠标移动事件
});

键盘事件： 如果事件与键盘有关，你可以使用事件对象的 keyCode 或 key 属性来获取按下的键的信息。

document.addEventListener('keydown', function(event) {
  var keyCode = event.keyCode;
  var key = event.key;
  // 处理键盘事件
});