javascript - JavaScript 函数中的事件/对象

Question

如果我有一些这样的 HTML：

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

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

function SetTopLeft(e, o)

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

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

顺便说一句，这必须在 IE 6 及更高版本中工作。火狐也不错。其他没有必要。

score 4 · Accepted Answer

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

HTML

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

JavaScript

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

score 3 · Accepted Answer

一般来说，您应该避免使用内联事件处理程序。它将表示 (HTML) 与逻辑 (JavaScript) 混合在一起。quirksmode.org 提供了一个很好的关于事件处理的文章集合。

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

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

有关详细信息，请参阅.call() ^[MDN]。

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

2 回答 2