jQuery：如何在事件处理函数中获取事件对象而不将其作为参数传递？

Posted 2023-02-22

【中文标题】jQuery：如何在事件处理函数中获取事件对象而不将其作为参数传递？

【英文标题】：jQuery: How to get the event object in an event handler function without passing it as an argument?

【发布时间】：2011-08-16 12:03:15

【问题描述】：

我的链接上有一个onclick 属性：

<a href="#" onclick="myFunc(1,2,3)">click</a>

在 javascript 中指向这个事件处理程序：

function myFunc(p1,p2,p3) 
    //need to refer to the current event object:
    alert(evt.type);        

既然事件对象“evt”没有传入参数，那么是否还能获取到这个对象呢？

我试过window.event和$(window.event)，但都是undefined。

有什么想法吗？

【参考方案1】：

既然没有从参数中传入事件对象“evt”，那么是否还有可能获取到这个对象呢？

不，不可靠。 IE 和其他一些浏览器将其作为window.event（不是$(window.event)）提供，但这是非标准的，并非所有浏览器都支持（众所周知，Firefox 不支持）。

最好将事件对象传递给函数：

<a href="#" onclick="myFunc(event, 1,2,3)">click</a>

这甚至适用于非 IE 浏览器，因为它们在具有 event 变量的上下文中执行代码（并且适用于 IE，因为 event 解析为 window.event）。我已经在 IE6+、Firefox、Chrome、Safari 和 Opera 中尝试过。示例：http://jsbin.com/iwifu4

但您的最佳选择是使用现代事件处理：

html：

<a href="#">click</a>

JavaScript 使用 jQuery（因为您使用的是 jQuery）：

$("selector_for_the_anchor").click(function(event) 
    // Call `myFunc`
    myFunc(1, 2, 3);

    // Use `event` here at the event handler level, for instance
    event.stopPropagation();
);

...或者如果您真的想将event 传递给myFunc：

$("selector_for_the_anchor").click(function(event) 
    myFunc(event, 1, 2, 3);
);

选择器可以是任何标识锚点的东西。你有一个very rich set 可供选择（几乎所有的 CSS3，加上一些）。您可以将id 或class 添加到锚点，但同样，您还有其他选择。如果您可以使用它在文档中的位置而不是添加一些人为的东西，那就太好了。

【讨论】：

感谢您的解释，这部分javascript一直让我感到困惑。这个无形的、神秘的“事件”参数不知从哪里传入的想法从来没有向我解释清楚。

【参考方案2】：

在IE中你可以通过window.event获取事件对象 在其他没有'use strict' 指令的浏览器中，可以通过arguments.callee.caller.arguments[0] 获取。

function myFunc(p1, p2, p3) 
    var evt = window.event || arguments.callee.caller.arguments[0];

【讨论】：

arguments.callee.caller.arguments 仍然期望事件作为参数/参数传递。

这行不通。该函数是从事件处理程序中显式调用的，没有事件参数，因此它不能作为参数访问。

我在 Chrome 上测试过，它可以工作，Event 对象是 HTML 内联事件的隐含参数，arguments.callee.caller 是 HTML 生成的匿名事件处理函数，它的第一个参数是隐含的 Event 对象

arguments.callee.caller 没有得到普遍支持，在一些支持它的实现中速度非常慢，是一个真的坏主意，并且在严格模式下是不允许的。

对，不鼓励被调用者和调用者，但是当事件处理代码嵌入 HTML 时，这是访问 Event 对象的唯一方法，最好的方法是始终使用 javascript 不显眼地注册事件 :)

【参考方案3】：

如果您像现在一样在标记上调用事件处理程序，则不能（x-browser）。 但是如果你用jquery绑定click事件，可以通过以下方式：

标记：

  <a href="#" id="link1" >click</a>

Javascript：

  $(document).ready(function()
      $("#link1").click(clickWithEvent);  //Bind the click event to the link
  );
  function clickWithEvent(evt)
     myFunc('p1', 'p2', 'p3');
     function myFunc(p1,p2,p3)  //Defined as local function, but has access to evt
        alert(evt.type);        
     
  

事件发生后

【讨论】：

“如果你在标记上调用你的事件处理程序，就像你现在所做的那样，你不能（x-browser）。” 实际上，你可以（见我的答案；这适用于所有主要浏览器和我曾经尝试过的所有次要浏览器——IE6+、Firefox、Chrome、Safari、Opera ......）。但最好不要这样做。

但是在您的解决方案中，您将event 作为参数发送，而LazNiko 的要求是不要这样做。肯定有别的办法，但既然问的人走了，那就没用了：S

一种方法（使用标记）确实是从标记中调用 clickWithEvent 函数，但是，正如我们所知，从标记中调用不是最好的方法（并且它是相同的最终解决方案）。

【参考方案4】：

像这样编写您的事件处理程序声明：

<a href="#" onclick="myFunc(event,1,2,3)">click</a>

然后你的“myFunc()”函数就可以访问事件了。

“onclick”属性的字符串值转换为函数的方式与浏览器（内部）调用函数构造函数的方式几乎完全相同：

theAnchor.onclick = new Function("event", theOnclickString);

（IE 除外）。但是，因为“事件”在 IE 中是全局的（它是一个窗口属性），所以您可以在任何浏览器中以这种方式将它传递给函数。

【讨论】：

在 FF 中测试过，你是对的，它失败了。在大量反对票到来之前删除了该帖子。感谢您的提醒:)