0

I have event listeners with function defined inside the event listeners as: 

$("body")[0].addEventListener( "click", function my3(){alert(786)});

Now when I try to remove this eventlistener as: 

$("body")[0].removeEventListener( "click", function my3);

I get the error that my3 is not defined. Is there any way to remove these type of eventlisteners or defining my3 function outside the event listener is the only way?.

user31782
  • 7,087
  • 14
  • 68
  • 143

2 Answers2

4

Is there any way to remove these type of eventlisteners...

No, not with addEventListener/removeEventListener. But you've tagged , so keep reading, because you can with jQuery.

...or defining my3 function outside the event listener is the only way?

It's the only way with addEventListener/removeEventListener. You need to have a reference to the function that was added in order to remove it. So:

// Declare the function
function my3() {
    alert(786);
}

// Add it
$("body")[0].addEventListener( "click", my3);

// Later, remove it
$("body")[0].removeEventListener( "click", my3);

You've tagged your question , so I'll note that that isn't true of handlers attached with jQuery, because jQuery maintains its own list of event handlers rather than using the native DOM's list. That means you can remove all handlers for an event that were attached with jQuery from an element without having a reference to them, and/or use jQuery's "namespaced" events to remove just a subset of them, again without having to have references to them.

For instance:

$("body").on("click.foo", function my3() { alert(786); });

There, we've "namespaced" our click handler with foo. Later, we can remove our handler without affecting any other click handlers:

$("body").off("click.foo");

Details in the documentation for on and off.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • How does jquery `off` method remove event listeners without using the name of the function? Does it use something other than `removeEventListener`? – user31782 Jun 26 '16 at 13:34
  • @user31782: Yes. As I said above, it uses its own list of handlers. It has a single event handler it registers (which it keeps a reference to) and then uses that handler to call all of the registered handlers for that event on that element. This is also how jQuery can ensure that handlers are called in the DOM2 events order even though old IE called them in the opposite of the DOM2 order. (Not Microsoft's fault initially, they got there first. It was MS's fault by IE8, though, for not supporting the at-that-point-very-mature standard.) – T.J. Crowder Jun 26 '16 at 13:38
  • 1
    @T.J.Crowder At chrome, chromium you could use Command Line API `getEventListeners(document.body).click[0].remove()`; see https://developer.chrome.com/devtools/docs/commandline-api#geteventlistenersobject, http://stackoverflow.com/questions/9046741/get-event-listeners-attached-to-node-using-addeventlistener – guest271314 Jun 26 '16 at 14:24
  • @guest271314: While that's true in the console, it's not available in normal/real code. Still, useful to know when debugging. – T.J. Crowder Jun 26 '16 at 14:39
  • @T.J.Crowder https://www.w3.org/TR/2011/WD-dom-20110915/#dom-eventtarget-addeventlistener _"Append an event listener to the associated list of event listeners with type set to type, listener set to listener, and capture set to capture, unless there already is an event listener in that list with the same type, listener, and capture."_ Curious where the "associated list of event listeners" is stored? – guest271314 Jun 26 '16 at 14:50
  • @guest271314: It's internal to the browser, not exposed anywhere. – T.J. Crowder Jun 26 '16 at 14:51
  • @T.J.Crowder What are the differences between using `.onclick` and `.addEventListener`? – guest271314 Jun 26 '16 at 14:54
  • @guest271314: There can only be one handler assigned to the `onclick` property. This really has nothing to do with the question asked or the answer above. – T.J. Crowder Jun 26 '16 at 14:56
  • The reason asked is with `.onclick` you can use `element.onclick = null` to remove the handler – guest271314 Jun 26 '16 at 14:57
  • @guest271314: Indeed you can. – T.J. Crowder Jun 26 '16 at 15:00
0

Another option is to use .onclick, where you can remove the handler with document.body.onclick = null

guest271314
  • 1
  • 15
  • 104
  • 177