JavaScript事件对象在浏览器控制台中

JavaScript event object in the browser console

本文关键字：控制台 浏览器 事件 对象 JavaScript      更新时间：2023-09-26

我先为我的无知道歉。我正在自学JavaScript，目前正在实验事件，尽管我仍然对JS对象感到困惑，但我不确定控制台在以下事件上打印的内容。

element.onclick = function(objEvent) {
 Console.log(objEvent);
}

控制台显示click clientX=76, clientY=20。这些信息到底是什么?这些是事件对象的属性吗?

是事件对象的属性吗?

是的，他们是。在您的情况下(对于click事件)，它实际上是一个对象，是Event的超集:MouseEvent。

每当触发与DOM相关的事件时，所做操作的所有相关信息都会被收集并存储在一个名为event的对象中，在您的示例中，该对象称为objEvent。

由键盘动作引起的事件生成关于按下的键的信息。另一方面，由鼠标引起的事件生成关于鼠标位置的信息，这就是您这里的情况(鼠标光标的X和Y位置)。

没错。

从这个event object有各种属性和方法。您在这里看到的属性是鼠标位置。

该事件对象的一个常见用途可能是获取事件的target/srcElement 

event.target | event.srcElement

eg -获取目标元素的id 

event.target.id

非常好的学习对象

这些只是鼠标点击位置在屏幕上的像素坐标。

clientX是x坐标

clientY是y坐标

Click为事件，clientX和cliententy为点击发生的像素坐标位置。查看更多信息- http://www.javascripter.net/faq/mouseclickeventcoordinates.htm

相关文章：