CODEWITHSUNDEEP
javascriptevent-listener
poashoas
poashoas

Reputation: 1894

javascript removing event listeners

Is the following actually removing the event before destroying the element? I can't figure out in the DOM inspector what functions are attached and if they're removed after running the following code:

el.addEventListener('click', function attachFunction (a, b) {
    console.log(a);
    console.log(b);
}, false);

el.removeEventListener('click', attachFunction, false);

Upvotes: 3

Views: 164

Answers (4)

starwed
starwed

Reputation: 2607

The function keyword can be used two ways: as a function statement or an expression. There is a discussion of the differences here, but I'll try to cover the relevant parts.

When used as a statement (as below), the function name will be valid within the surrounding scope of the statement:

function hi(){ 
    console.log(typeof hi); // "function"
}
console.log(typeof hi); // "function"

But when used as an expression, the function name is only valid within the function body:

var greetings = function hi(){ 
    console.log(typeof hi); // "function"
}
console.log(typeof hi); // "undefined"
console.log(typeof greetings); // "undefined

So the scope problem with your initial example is that, because you are using it as an expression, the name attachFunction will be undefined when you try to unbind it.

(I think you also have some confusion about how parameters are passed to event handlers, but that's a separate issue.)

Upvotes: 0

Pointy
Pointy

Reputation: 413976

If you want to be able to remove an event listener added with addEventListener, define it external to the addEventListener() call:

function attachFunction (a, b) {
    console.log(a);
    console.log(b);
}

then:

el.addEventListener("click", attachFunction);

Then your .removeEventListener() can work.

Upvotes: 1

user3310334
user3310334

Reputation:

No, as it stands, your code will not work

Note: To remove event handlers, the function specified with the addEventListener() method must be an external function.

W3Schools w3fools -(sorry, but sometimes w3fools does provide just what you wanted)

So, you would need to do this instead:

function attachFunction(a, b){
  console.log(a);
  console.log(b);
}

el.addEventListener('click', attachFunction, false);

el.removeEventListener('click', attachFunction, false);

which will work as expected.

If you want to pass certain arguments to your function attachFunction, you'll need to use another function:

function attachFunction(a, b){
  console.log(a);
  console.log(b);
}

function linkFunction(){
  attachFunction(a, b); // a and b can be replaced with anything you want
}

el.addEventListener('click', linkFunction, false);

el.removeEventListener('click', linkFunction, false);

Upvotes: 2

Sebastien C.
Sebastien C.

Reputation: 4833

The syntax function foo(whatever) is evaluated before the runtime, so Idon't think your code is a valid syntax or will have the expected behaviour. You should better use an anonymous function like this:

var attachFunction = function(a, b) {
    console.log(a);
    console.log(b);
}
el.addEventListener('click', attachFunction, false);
el.removeEventListener('click', attachFunction, false);

Please also note that an event listener (here attachFunction) can only have a single argument which is the event object.

Upvotes: 0

Related Questions