1

I have this code:

    chrome.tabs.onUpdated.addListener(function(callback){
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

    eventer(messageEvent,function(e) {//script});

});

I want to remove the second listener after it has fired (chronologically the first one fires first, then the second one fires when it gets a message).

I really don't understand the syntax of the .removeEventListener function and how to apply it on my example. I already read that it doesn't work with anonymous functions in the listeners so I had to declare the functions first, is that right?

Thanks for any help.

Julius S.
  • 664
  • 9
  • 21
  • 1
    Possible duplicate of [JavaScript: remove event listener](http://stackoverflow.com/questions/4402287/javascript-remove-event-listener) – Flying Gambit Sep 15 '16 at 07:13

2 Answers2

2
target.removeEventListener(type, listener[, options]);

Reference : https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

EDIT :

var handler;
chrome.tabs.onUpdated.addListener(function(callback)
{
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    handler = function(e)
    {
        // Script
    };
    eventer(messageEvent, handler);
});

var cond = window.addEventListener;
window[cond ? 'removeEventListener' : 'detachEvent'](cond ? 'message' : 'onmessage', handler);
Liberateur
  • 1,337
  • 1
  • 14
  • 33
1

It's a bit tricky, but bear with me. Here's how you add an event listener:

el.addEventListener("event", function () {
  // code
});

The removeEventListener's signature is almost same, but here's the catch: You'll need to pass a variable that refers to the function that you passed to the addEventListener. Passing an anonymous function doesn't help (As you'll have no way to refer to it later). So, in your case, you'd have to pass a named function instead:

function eventHandler (e) { /* handle e */ }
el.addEventListener("event", eventHandler);

To remove it, pass it to the removeEventListener:

el.removeEventListener("event", eventHandler);

The el is the element you're adding the listener to, the event can be an event, like click for instance, and the eventHandler refers to the function object.

Daemonk
  • 26
  • 5
  • 1
    Thank you for the first real answer that helps me. I will try to define the function first. Can you tell me, what "el" is in my example? Is it "window" ? – Julius S. Sep 15 '16 at 07:37
  • Yes, in your example, `el` refers to `window`. – Daemonk Sep 15 '16 at 07:38
  • Also, `attachEvent` is only for IE8 and older. So, unless you're supporting them, there's no reason to use it. – Daemonk Sep 15 '16 at 07:39
  • If you found my answer helpful, consider accepting it :) – Daemonk Sep 15 '16 at 08:15
  • What do you mean by "accepting it". A mental state or a function here in stackoverflow? :D – Julius S. Sep 15 '16 at 08:32
  • :D Did that. Everything works except for the "chrome.tabs.onUpdated.removeListener(Handler2);" then I get "Error in event handler for tabs.onUpdated: TypeError: The first argument is the receiver and must be an object". Can you tell me what is wrong with that? There is no problem adding the listener, the assigned function is called but when I add this remove command, I get this error. – Julius S. Sep 15 '16 at 08:44
  • Currently reading this but could not fix it yet : https://developer.chrome.com/extensions/events – Julius S. Sep 15 '16 at 08:48
  • That is weird. I'd suggest posting another question. – Daemonk Sep 15 '16 at 09:50
  • `TypeError` usually means that the argument is of a type different from what is expected. – Daemonk Sep 15 '16 at 09:50