Add AND remove eventlistener with arguments and access element and event? - Javascript

Question

Lets say I want to pass arguments to my function. I hear that I should do it by calling another function from within a function like this:

myElement.addEventListener("click",function whatever(event){
    myFunk(event,"some argument");
},false);

But what now if I want to remove it?

myElement.removeEventListener("click",whatever,false);

var myElement = document.querySelector('div')
function myFunk(e,m){
  console.log(e,m)
}
myElement.addEventListener("click",function whatever(event){
    myFunk(event,"some argument")
},false)

myElement.removeEventListener("click", whatever, false)

<div></div>

This returns a "whatever is not defined" error in the console. So does my function not have a name? Is "whatever" not its name? How now do I remove it?

I need a way to assign an event listener and pass it arguments, and then get rid of it later. How do I do this?

EDIT:

Okay, yes, I cannot refer to whatever because it is written inline. But the reason I am forced to use a function expression inline is because I want to pass it arguments. I want to pass it arguments because I don't want to have to define a new function for every time I want to change the behaviour. If I define an event listener using text on the "on" property I can easily swap out parameters:

element.onClick("myFunc('do one thing')");

element.onClick("myFunc('do a different thing')");

How do I do this with addEventListener, inline, removable, and with dynamic parameters?

your problem that whatever not function, but function expression, so after calling myElement.addEventListener function whatever is not available, but you can use whatever inside like function whatever(){...; whatever();} — Grundy
– Grundy, Commented Jul 14, 2015 at 11:19
The only reason I wrapped 'myFunc' inside of 'whatever' was so that I could pass arguments to the function. I want to be able to call a function with arguments on an event, and then remove the function, and then re-add it with different arguments later so it behaves differently. — ADJenks
– ADJenks, Commented Jul 14, 2015 at 16:26
can you provide a small working jsfidlle what you have and what you try? — Grundy
– Grundy, Commented Jul 14, 2015 at 17:03

Rick Hitchcock · Accepted Answer · 2015-07-15 02:02:39Z

10

For addEventListener()'s second argument, do this:

whatever= function(event) {
  ...
}

… instead of this:

function whatever(event) {
  ...
}

You'll then be able to remove the event like this:

myElement.removeEventListener('click' , whatever);

To pass parameters to another event, use bind, like this:

whatever= myfunk.bind(myElement, parameter1, parameter2, ...)

Example

var myElement= document.getElementById('myElement');

function myfunk(s) {
  this.innerHTML+= '<br>'+s;
  myElement.removeEventListener('click', whatever);

  myElement.addEventListener(
    'click',
    whatever= myfunk.bind(myElement, 'Clicked again.')
  );
}

myElement.addEventListener(
  'click',
  whatever= myfunk.bind(myElement, 'Clicked once.')
);

<div id="myElement">Click me!</div>

edited Jul 15, 2015 at 2:02

answered Jul 14, 2015 at 11:23

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

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

5 Comments

Grundy Over a year ago

but in this case whatever added in global object

Rick Hitchcock Over a year ago

True. We could add var whatever; prior to the event listener if this were within a function. But I would think that most event handlers would be defined within the global scope.

ADJenks Over a year ago

I cannot then pass arguments to the function.

ADJenks Over a year ago

BIND! THAT's IT! BIND! Thanks a lot. Now my brain is at ease.

ADJenks Over a year ago

Looking back at this, I probably could have also used a factory pattern.

Amit · Accepted Answer · 2015-07-14 18:32:25Z

1

Maybe this will help you with your goal... generateHandler generates an event handler function for an input function, with an input argument and passes the "real handler" the event, the argument AND the handler instance for easy removal. It also returns that instance for removing the handler from outside.

I then show various ways of how this can be used. Hope this helps...

function generateHandler(f, arg) {
  var handler = function (evt) {
    f(evt, arg, handler);
  };
  return handler;
}

function realFunc(evt, arg, handler) {
  alert(arg);
  if(arg == 2) {
    document.getElementById('el').removeEventListener('click', handler);
    document.getElementById('el').innerHTML = 'I also do nothing now';
  }
}

function replace1Time(evt, arg, handler) {
  document.getElementById('el').removeEventListener('click', elHandler);
  elHandler = generateHandler(realFunc, 2);
  document.getElementById('el').addEventListener('click', elHandler);
  document.getElementById('el2').removeEventListener('click', handler);
  document.getElementById('el2').innerHTML = 'I do nothing now';
}

var elHandler = generateHandler(realFunc, 1);

document.getElementById('el').addEventListener('click', elHandler);
document.getElementById('el2').addEventListener('click', generateHandler(replace1Time));

<div id="el">Click me!</div>
<div id="el2">Click me to replace 1 time</div>

edited Jul 14, 2015 at 18:32

answered Jul 14, 2015 at 11:11

Amit

46.5k9 gold badges84 silver badges114 bronze badges

2 Comments

ADJenks Over a year ago

To add a new listener with different arguments for realFunc I would then have to define a new function each time I wanted to pass arguments to it. Must I really define a new function, and then change the arguments in the second function, every time I want to change the arguments?

Amit Over a year ago

@adjenks It's not entirely clear what exactly would be "good enough", but I gave you a more flexible solution.

Alp · Accepted Answer · 2015-07-14 11:19:13Z

0

Take a look at this fiddle

What happens is you will see an alert when you press the button but won't see it afterwards as it will be removed from the listener.

function anotherFunctionWithParams(param1, param2){
      alert (param1 + "-" + param2);
}

var cbFunc= function(){
  anotherFunctionWithParams("tra","lalala");
  document.getElementById("test").removeEventListener("click", cbFunc);
}


document.getElementById("test").addEventListener("click", cbFunc, false);

Also not that, you can NOT remove inline anonymous listener functions.

answered Jul 14, 2015 at 11:19

Alp

3,1471 gold badge16 silver badges29 bronze badges

3 Comments

ADJenks Over a year ago

To add a new listener with different arguments I would then have to define a new function each time I wanted to pass arguments to it. Must I really define a new function, and then change the arguments in the second function, every time I want to change the arguments?

Alp Over a year ago

@adjenks can you use jquery ?

ADJenks Over a year ago

Well if jQuery can do it, then you must be able to do it with vanilla javascript. I would gladly look at a jQuery answer though, and then perhaps I could examine the jQuery library to see how it does it.

Collectives™ on Stack Overflow

Add AND remove eventlistener with arguments and access element and event? - Javascript

3 Answers 3

5 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related