JavaScript 函数中的事件/对象

Event/object in JavaScript function

本文关键字：对象 事件 函数 JavaScript      更新时间：2023-09-26

如果我有一些这样的HTML：

<a onmouseover='SetTopLeft(this);'href='#'>Click me!</a>

我可以同时获取函数中的对象和事件吗？那么，例如，我可以拥有这样的方法签名吗？

function SetTopLeft(e, o)

。其中 e 是事件，o 是"这个"？我实际上可能不需要该对象，但我认为我可能确实需要该事件。我不介意更好地理解它在 JavaScript 中是如何工作的 - 即，何时/如何传递事件以及何时/如何传递调用对象？我可以选择通过哪个吗？我可以同时通过吗？

基本上，我真正需要做的是在锚点所在的 DIV 中获取鼠标坐标（即使该 DIV 只是网页的一部分以及浏览器是否全屏），我有一个糟糕的时间完成它。我看到的大多数用于在某些元素中获取这些坐标的示例都使用该事件以及该事件的 pageX 和 pageY 属性。

顺便说一下，这必须在IE 6以后的工作。火狐也会很好。其他的不是必需的。

是的

，在内联代码中，this引用元素的HTML DOM对象，event引用事件对象。因此，您可以执行以下操作：

.HTML

<a onmouseover='SetTopLeft(event, this);' href='#'>Click me!</a>

JavaScript

function SetTopLeft(e, obj) {...}

通常应避免使用内联事件处理程序。它将表示（HTML）与逻辑（JavaScript）混合在一起。quirksmode.org 提供了有关事件处理的所有文章的大量文章。

由于在事件处理程序中，this通常引用处理程序绑定到的元素，因此还可以显式设置元素this并将事件对象作为第一个参数传递：

<a onmouseover='SetTopLeft.call(this, event);'href='#'>Click me!</a>

有关更多信息，请参阅 .call() [MDN]。

除此之外，如果您的链接没有链接到任何内容，最好使用简单的span元素或按钮并相应地设置其样式。

相关文章：