JavaScript 事件对象介绍

在前端开发中，事件是非常重要的概念。当用户与页面交互时，页面上的元素会触发不同类型的事件。JavaScript 中的事件处理程序可以通过事件对象来访问事件的相关信息。

事件对象简介

事件对象代表了当前正在处理的事件。当事件发生时，浏览器会创建一个事件对象，并将其作为参数传递给相应的事件处理程序。事件对象包含了与事件相关的属性和方法，开发者可以使用这些属性和方法来获取事件的详细信息。

事件对象的常见属性

以下是事件对象常见的属性：

• target：事件发生的目标元素。
• type：事件的类型。
• clientX 和 clientY：鼠标指针相对于浏览器窗口可视区域的坐标。
• pageX 和 pageY：鼠标指针相对于文档页面的坐标。
• keyCode：键盘上被按下的键的代码值。
• preventDefault()：取消事件的默认行为。
• stopPropagation()：阻止事件冒泡到父元素。

事件对象的使用示例

在下面的示例中，我们将演示如何使用事件对象获取鼠标点击事件的相关信息：

const btn = document.querySelector('button');
btn.addEventListener('click', function(event) {
  console.log(`鼠标点击了按钮：${event.target}`);
  console.log(`鼠标指针相对于浏览器窗口的坐标：(${event.clientX}, ${event.clientY})`);
  console.log(`鼠标指针相对于文档页面的坐标：(${event.pageX}, ${event.pageY})`);
});

在上面的代码中，我们首先获取了一个按钮元素，并为其添加了一个点击事件处理程序。在事件处理程序中，我们使用 console.log 打印出了事件对象的 target、clientX、clientY 和 pageX、pageY 属性的值。

总结

通过本文的介绍，我们了解了 JavaScript 中的事件对象及其常见属性，以及如何使用这些属性来获取事件的详细信息。熟练掌握事件对象的相关知识，可以让我们更好地处理页面中的交互操作，并提升前端开发的效率和质量。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2641