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


68

我的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

任何想法?

Answers:


98

由于未从参数传递事件对象“ evt”,因此仍然可以获得该对象吗?

不,不可靠。IE和其他一些浏览器以window.event(not $(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>

使用jQuery的JavaScript(因为您使用的是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();
});

...或者如果您真的想传递eventmyFunc

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

选择器可以是标识锚点的任何内容。您有非常丰富的设置可供选择(几乎所有CSS3,再加上一些)。您可以在锚点上添加idclass,但同样,您还有其他选择。如果您可以使用它在文档中的位置,而不是添加人工的东西,那就太好了。


5
感谢您的解释,这部分javascript一直使我感到困惑。这个无形的,神秘的“事件”参数从无处传来的想法从未向我很好地解释过。
Captain Hypertext

15

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

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

1
arguments.callee.caller.arguments仍然期望事件作为参数/参数传递。
卡斯帕·克莱内

这行不通。该函数是在没有事件参数的情况下从事件处理程序中显式调用的,因此无法将其作为参数进行访问。
尖尖的

1
我在Chrome上对其进行了测试,它可以正常工作,Event对象是HTML内联事件的隐式参数,并且arguments.callee.caller是HTML生成的匿名事件处理函数,它的第一个参数是隐式的Event对象
otakustay 2011年

6
arguments.callee.caller不受普遍支持,在某些受支持的实现中速度非常慢,这是一个非常糟糕的主意,并且在严格模式下是不允许的。
TJ Crowder

1
正确,不鼓励被调用者和调用者,但这是将事件处理代码与HTML内联放置时访问Event对象的唯一方法,最好的方法是始终使用javascript
轻松

4

像这样编写事件处理程序声明:

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

然后,您的“ myFunc()”函数可以访问该事件。

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

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

(IE中除外)。但是,由于“事件”是IE中的全局变量(它是window属性),因此您可以在任何浏览器中将其传递给函数。


在FF中测试,您说对了,但失败很困难。在大量投票失败之前删除了该帖子。感谢大家的注意:)
JohnP 2011年

1

如果像现在那样在标记上调用事件处理程序,则不能(x-browser)。但是,如果将click事件与jquery绑定,则可能采用以下方式:

标记:

  <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);        
     }
  }

自从事件ob


1
“如果像现在那样在标记上调用事件处理程序,则不能(x-browser)。” 实际上,您可以(请参阅我的答案;该功能适用​​于所有主要浏览器以及我尝试过的所有次要浏览器-IE6 +,Firefox,Chrome,Safari,Opera ...)。但是最好不要这么做。
TJ Crowder

但是在您的解决方案中,您将event作为参数发送,而LazNiko的要求是不要这样做。肯定有另一种方法,但由于取消了问号,它就一文不值:S
Edgar Villegas Alvarado

一种方法(使用标记)确实是clickWithEvent从标记调用函数,但是,正如我们所知,从标记调用不是最佳方法(最终还是相同的解决方案)。
埃德加(Edgar Villegas)Alvarado的
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.