JQuery: How to get an event object in an event handler function without passing it as an argument?

Question

I have an onclick attribute in my link:

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

This points to this event handler in JavaScript:

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

Since the evt event object is not passed to the parameter, is it possible to get this object?

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

Any idea?

Answer 1

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

No, not reliable. IE and some other browsers make it available as window.event (not $(window.event) ), but many browsers do not.

You better pass an event object to a function:

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

This works even in browsers other than IE because they execute code in a context that has an event variable (and works in IE because event allows window.event ). I tried this on IE6 +, Firefox, Chrome, Safari and Opera. Example: http://jsbin.com/iwifu4

But your best bet, of course, must correctly connect the event:

HTML:

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

JavaScript using jQuery (since you are using 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 to 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 selection to choose from (almost all CSS3, as well as some). You can add an id or class binding, but again, you have other options. If you can use what is in the document and not add something artificial, great.

Answer 2

in IE, you can get the window.event event window.event in other browsers without the 'use strict' directive 'use strict' you can get arguments.callee.caller.arguments[0] .

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

Answer 3

Write the declaration of your event handler as follows:

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

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

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

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

(except IE). However, since the "event" is global in IE (this is a window attribute), you can pass it functions in this way in any browser.

Answer 4

If you call the event handler for markup, as you are doing now, you cannot (x-browser). But if you bind the click event with jquery, this is possible as follows:

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 is ob