How can I refer to the event object from an external function? - jQuery

Question

I'm having trouble referring to the event object in a jQuery function:

// Execute a function when an image with the arrow class is clicked
$('.arrow').bind('click',update_support);

// Function tries to refer to the calling image using $(this)
function update_support() {
  alert( $(this).src );
}

// Result: an alert of 'undefined'

This code does work, but it passes the "this" object to the function explicitly, and I feel like there must be a better way:

$('.arrow').bind('click',update_support(this));

function update_support(obj) {
  alert( obj.src );
}

// Result: an alert with the src of the clicked image

Edit to make my question clearer: Why should I have to give any arguments to the function explicitly? From jQuery docs at http://api.jquery.com/category/events/event-object: "The event object is guaranteed to be passed to the event handler." My question is: if I don't pass it explicitly, where is it? ;) ?

Answer 1

Instead of:

alert( $(this).src );

Try:

alert( this.src );

$(this) is a jQuery object. this is a DOM element.

Answer 2

$('.arrow').bind('click',function(event){ update_support(event);} );

Untested, but that should pass a reference to the event into update_support.

Edit: You'd also need to modify update_support, obviously:

function update_support(evt) {
  alert( evt.target.src );
}

Answer 3

As an alternative to both inkedmn's and J-P's answers

// Execute a function when an image with the arrow class is clicked
$('.arrow').bind('click',update_support);

// Function tries to refer to the calling image using $(this)
function update_support(e) {
  alert( e.target.src );
}

e in this case is the event object (normalised across browsers)

If you don't define a parameter for the event object argument explicitly in the event handler signature, the event object can be referenced using arguments

// Execute a function when an image with the arrow class is clicked
$('.arrow').bind('click',update_support);

// Function tries to refer to the calling image using $(this)
function update_support() {
  alert( arguments[0].target.src );
}

But in my honest opinion, it would make the code easier to read by explicitly defining a parameter for the event object argument.