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

时间:2022-11-07 13:49:07

I have an onclick attribute on my link:

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

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

That points to this event handler in JavaScript:

这指向JavaScript中的这个事件处理程序:

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

Since the event object "evt" is not passed to a parameter, is it still possible to obtain this object?

由于事件对象“evt”未传递给参数,是否仍然可以获取此对象?

I tried window.event and $(window.event), but both are undefined.

我试过window.event和$(window.event),但两者都是未定义的。

Any idea?

4 个解决方案

#1


Since the event object "evt" is not passed from the parameter, is it still possible to obtain this object?

由于事件对象“evt”未从参数传递,是否仍然可以获取此对象?

No, not reliably. IE and some other browsers make it available as window.event (not $(window.event)), but that's non-standard and not supported by all browsers (famously, Firefox does not).

不,不可靠。 IE和其他一些浏览器使它可用作window.event(不是$(window.event)),但这是非标准的,并不是所有浏览器都支持(着名的是,Firefox不支持)。

You're better off passing the event object into the function:

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

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

That works even on non-IE browsers because they execute the code in a context that has an event variable (and works on IE because event resolves to window.event). I've tried it in IE6+, Firefox, Chrome, Safari, and Opera. Example: http://jsbin.com/iwifu4

这甚至可以在非IE浏览器上运行,因为它们在具有事件变量的上下文中执行代码(并且因为事件解析为window.event而在IE上工作)。我在IE6 +,Firefox,Chrome,Safari和Opera中尝试过它。示例:http://jsbin.com/iwifu4

But your best bet is to use modern event handling:

但最好的办法是使用现代事件处理:

HTML:

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

JavaScript using jQuery (since you're using jQuery):

使用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();});

...or if you really want to pass event into myFunc:

...或者如果你真的想将事件传递给myFunc:

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

The selector can be anything that identifies the anchor. You have a very rich set to choose from (nearly all of CSS3, plus some). You could add an id or class to the anchor, but again, you have other choices. If you can use where it is in the document rather than adding something artificial, great.

选择器可以是标识锚点的任何东西。你有一个非常丰富的选择(几乎所有的CSS3,加上一些)。您可以向锚点添加id或类,但同样,您还有其他选择。如果你可以使用它在文档中的位置,而不是添加一些人工的,伟大的。

#2


in IE you can get the event object by window.eventin other browsers with no 'use strict' directive, it is possible to get by arguments.callee.caller.arguments[0].

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

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

#3


Write your event handler declaration like this:

编写你的事件处理程序声明如下:

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

Then your "myFunc()" function can access the event.

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

The string value of the "onclick" attribute is converted to a function in a way that's almost exactly the same as the browser (internally) calling the Function constructor:

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

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

(except in IE). However, because "event" is a global in IE (it's a window attribute), you'll be able to pass it to the function that way in any browser.

(在IE中除外)。但是,因为“event”是IE中的全局(它是一个窗口属性),所以你可以在任何浏览器中将它传递给该函数。

#4


If you call your event handler on markup, as you're doing now, you can't (x-browser).But if you bind the click event with jquery, it's possible the following way:

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

Markup:

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

Since the event ob

自从事件ob

#1


Since the event object "evt" is not passed from the parameter, is it still possible to obtain this object?

由于事件对象“evt”未从参数传递,是否仍然可以获取此对象?

No, not reliably. IE and some other browsers make it available as window.event (not $(window.event)), but that's non-standard and not supported by all browsers (famously, Firefox does not).

不,不可靠。 IE和其他一些浏览器使它可用作window.event(不是$(window.event)),但这是非标准的,并不是所有浏览器都支持(着名的是,Firefox不支持)。

You're better off passing the event object into the function:

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

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

That works even on non-IE browsers because they execute the code in a context that has an event variable (and works on IE because event resolves to window.event). I've tried it in IE6+, Firefox, Chrome, Safari, and Opera. Example: http://jsbin.com/iwifu4

这甚至可以在非IE浏览器上运行,因为它们在具有事件变量的上下文中执行代码(并且因为事件解析为window.event而在IE上工作)。我在IE6 +,Firefox,Chrome,Safari和Opera中尝试过它。示例:http://jsbin.com/iwifu4

But your best bet is to use modern event handling:

但最好的办法是使用现代事件处理:

HTML:

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

JavaScript using jQuery (since you're using jQuery):

使用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();});

...or if you really want to pass event into myFunc:

...或者如果你真的想将事件传递给myFunc:

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

The selector can be anything that identifies the anchor. You have a very rich set to choose from (nearly all of CSS3, plus some). You could add an id or class to the anchor, but again, you have other choices. If you can use where it is in the document rather than adding something artificial, great.

选择器可以是标识锚点的任何东西。你有一个非常丰富的选择(几乎所有的CSS3,加上一些)。您可以向锚点添加id或类,但同样,您还有其他选择。如果你可以使用它在文档中的位置,而不是添加一些人工的,伟大的。

#2


in IE you can get the event object by window.eventin other browsers with no 'use strict' directive, it is possible to get by arguments.callee.caller.arguments[0].

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

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

#3


Write your event handler declaration like this:

编写你的事件处理程序声明如下:

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

Then your "myFunc()" function can access the event.

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

The string value of the "onclick" attribute is converted to a function in a way that's almost exactly the same as the browser (internally) calling the Function constructor:

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

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

(except in IE). However, because "event" is a global in IE (it's a window attribute), you'll be able to pass it to the function that way in any browser.

(在IE中除外)。但是,因为“event”是IE中的全局(它是一个窗口属性),所以你可以在任何浏览器中将它传递给该函数。

#4


If you call your event handler on markup, as you're doing now, you can't (x-browser).But if you bind the click event with jquery, it's possible the following way:

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

Markup:

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

Since the event ob

自从事件ob