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

时间:2022-11-07 13:44:15

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),但两者都没有定义。

Any idea?

任何想法?

4 个解决方案

#1


84  

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 many browsers don't.

不,不可靠。IE和其他一些浏览器使它可以作为窗口使用。事件(不是$(window.event)),但是很多浏览器都不是。

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浏览器上运行,因为它们在具有事件变量的上下文中执行代码(也可以在IE上运行,因为事件解析为windows .event)。我在IE6+、Firefox、Chrome、Safari和Opera上都试过。例如:http://jsbin.com/iwifu4

But your best bet, by far, is to hook up the event properly:

不过,到目前为止,你最好的办法是把这个活动恰当地联系起来:

HTML:

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


14  

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

在IE中,可以通过窗口获取事件对象。在没有“使用严格”指令的其他浏览器中,可以通过arguments.call .caller. parameters[0]获取事件。

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

#3


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.

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

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”属性的字符串值被转换为一个函数,其方式与调用函数构造函数的浏览器(内部)几乎完全相同:

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


1  

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浏览器)。但是,如果您使用jquery绑定单击事件,可以采用以下方式:

Markup:

标记:

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

Javascript:

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


84  

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 many browsers don't.

不,不可靠。IE和其他一些浏览器使它可以作为窗口使用。事件(不是$(window.event)),但是很多浏览器都不是。

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浏览器上运行,因为它们在具有事件变量的上下文中执行代码(也可以在IE上运行,因为事件解析为windows .event)。我在IE6+、Firefox、Chrome、Safari和Opera上都试过。例如:http://jsbin.com/iwifu4

But your best bet, by far, is to hook up the event properly:

不过,到目前为止,你最好的办法是把这个活动恰当地联系起来:

HTML:

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


14  

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

在IE中,可以通过窗口获取事件对象。在没有“使用严格”指令的其他浏览器中,可以通过arguments.call .caller. parameters[0]获取事件。

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

#3


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.

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

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”属性的字符串值被转换为一个函数,其方式与调用函数构造函数的浏览器(内部)几乎完全相同:

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


1  

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浏览器)。但是,如果您使用jquery绑定单击事件,可以采用以下方式:

Markup:

标记:

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

Javascript:

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