Passing the Event Object to a Function in Jquery

Question

Typically, I can pass an event to an anonymous Jquery function like so:

$(".click_me").on("click", function(e) {
  e.preventDefault();
});

Now let's say I remove the anonymous function but still want to pass the event to it:

function onClickMe(e){
  e.preventDefault();
}

$(".click_me").on("click", onClickMe(e));

Unfortunately, this doesn't work as expected. I get this error:

ReferenceError: e is not defined

So how else can I pass the event to an external function?

@MattBall Thanks for the tip. I've corrected my question. On a similar note, is there a proper term for what I call "external functions"? — nullnullnull
– nullnullnull, Commented Feb 12, 2013 at 16:29
@timothythehuman Probably just called a function, though an example would help. — Anthony Grist
– Anthony Grist, Commented Feb 12, 2013 at 16:38
The terms are "anonymous" and "named." Way more than you ever wanted to know: kangax.github.com/nfe — Matt Ball
– Matt Ball, Commented Feb 12, 2013 at 16:46

Anthony Grist · Accepted Answer · 2013-02-12 16:25:59Z

20

Just pass the function reference, jQuery will handle passing the arguments for you (it always passes the event as the first argument to the handler function). So:

function onClickMe(e){
  e.preventDefault();
}

$(".click_me").on("click", onClickMe);

answered Feb 12, 2013 at 16:25

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nullnullnull Over a year ago

Brilliant! I had no idea Jquery was so elegant.

David Thorisson Over a year ago

Confused here - preventDefault() is a jQuery function (not internal jscript one). How come then we call it without the $ I would have expected $(e).preventDefault()

Anthony Grist Over a year ago

@DavidThorisson Because the paramater e in the function is passed a jQuery Event object when the event fires, which has the preventDefault() function.

Muhammad Musavi Over a year ago

That works but I'm still looking for a way so that I can pass event and my own parameter in the same function, something like $(".click_me").on("click", onClickMe(event, parameter1));

Collectives™ on Stack Overflow

Passing the Event Object to a Function in Jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related