addEventListener in jQuery

Question

Possible Duplicate:
jQuery equivalent of JavaScript's addEventListener method

Also from a very good jQuery tutorial on : http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8

What is the jQuery equivalent for the following statement;

element1.addEventListener('click',doSomething2,false)

If it is the bind() method, is there any option to specify the last parameter (i.e. event bubbling or capturing ... true/false)

Yes, the 3rd parameter to `bind` can still be used to that effect: http://api.jquery.com/bind/ — James Allardice, Aug 11 '11 at 12:00
`false` is the default for all event handlers as IE does not support triggering the handler in the capturing phase. There is no way with jQuery to set it to `true`. — Felix Kling, Aug 11 '11 at 12:03
@James: I think you misunderstood the third parameter. It is either a function or `false`, but `false` in this case means: *Setting the third argument to false will attach a function that prevents the default action from occurring and stops the event from bubbling.*. — Felix Kling, Aug 11 '11 at 12:04
@Felix - "Setting the third argument to false will attach a function that prevents the default action from occurring and stops the event from bubbling." Or have I misunderstood the question? — James Allardice, Aug 11 '11 at 12:05
Same kind of questions : http://stackoverflow.com/questions/2398099/jquery-equivalent-of-javascripts-addeventlistener-method — Mr.T.K, Aug 11 '11 at 12:06
@James: Passing `false` to `addEventListener` does not prevent the event from bubbling. It indicates in which *phase* the event handler is to be triggered. See https://developer.mozilla.org/en/DOM/element.addEventListener — Felix Kling, Aug 11 '11 at 12:17

score 13 · Accepted Answer · edited Dec 24 '12 at 12:21

13

Try this

// Setting the third argument to false will attach a function
// that prevents the default action from occurring and 
// stops the event from bubbling.
$("#element1").bind("click", doSomething2, false);

edited Dec 24 '12 at 12:21

Mohammed H

6,880
16
81
127

answered Aug 11 '11 at 12:04

ShankarSangoli

69,612
13
93
124

1

True, it's worth mentioning that it was added only since 1.4.3 version – Shadow The GPT Wizard Aug 11 '11 at 12:07
That is not the equivalent of the `addEventListener`'s third parameter. It is merely a shortcut for `function(){ return false; }`. The call as you wrote it will treat `doSomething2` as event data (and probably throw an error). – Felix Kling Aug 11 '11 at 12:07
@Felix - I agree with you but the OP wanted something like this to prevent the event bubbling by passing a parameter. – ShankarSangoli Aug 11 '11 at 12:09
@Shankar: No, passing `false` to `addEventListener` does not do that (prevent bubbling). It just indicates in which *phase* the event handler should be triggered. Have a look at https://developer.mozilla.org/en/DOM/element.addEventListener – Felix Kling Aug 11 '11 at 12:12
@Felix - I am not saying that the solution which I provided is exactly equivalent to it. But it solves what OP mentioned in the second line of the question along with binding. – ShankarSangoli Aug 11 '11 at 13:43
@ShankarSangoli: What exactly does it solve? Definitely not *event bubbling or capturing*... – Felix Kling Aug 11 '11 at 13:54
@Felix - Passing `false` as 3rd parameter to [bind](http://api.jquery.com/bind/) method will attach a function that prevents the default action from occurring and stops the event from bubbling. – ShankarSangoli Aug 11 '11 at 14:00
@ShankarSangoli: Yes. But that is not what the OP is talking about (where is it written that the event should be stopped?). He does not want to *stop* bubbling, he wanted to specify whether the handler is triggered in the capturing phase or in the bubbling phase. And that is not possible with jQuery. – Felix Kling Aug 11 '11 at 14:01
@Felix - May be then I have misunderstood that part of the question, sorry about that. – ShankarSangoli Aug 11 '11 at 14:03

score 2 · Answer 2 · answered Aug 11 '11 at 12:03

Yes I'm pretty certain .bind() will work as you need it. Check out the jQuery .bind() docs page I'm sure you can figure out the setup. Demo code below:

$(document).ready(function() {
    $("#element1").bind('click', function() {
        // do something on click
    } 
});

Baz1nga · Answer 3 · 2011-08-11T12:07:02.940

0

use jquerys bind method

example:

document.bind("custom-listener", someCustomFunction, false);

document.trigger("custom-listener", {jsonArgsKey:jsonValue});

function someCustomFunction(json)
{
alert(json.jsonArgsKey);
}

edited Aug 11 '11 at 12:07

answered Aug 11 '11 at 12:01

Baz1nga

15,485
3
35
61

You forgot your `$` function! Don't you mean `$(document).bind...` etc.? – Abraham Aug 11 '11 at 12:08

Abraham · Answer 4 · 2011-08-11T12:07:21.353

0

Like this:

$(element1).click(doSomething)

If you want to stop bubbling, call event.stopPropagation() in your doSomething function, like this:

function doSomething (event){
  event.stopPropagation()
  // do whatever
}

There's no way to set up a capturing event handler with jQuery, though.

edited Aug 11 '11 at 12:07

answered Aug 11 '11 at 12:02

Abraham

20,316
7
33
39

addEventListener in jQuery

4 Answers4

Linked