How to pass arguments to addEventListener listener function

Question

The situation is somewhat like-  var someVar   some other function    someObj addEventListener  click   function        some function someVar      false     The problem is that the value of someVar is not visible inside the listener function of the addEventListener  where it is probably being treated as a new variable

User · Answer

You need   newElem addEventListener  click         handleEvent  function  event            clickImg parameter

User · Answer

This solution may good for looking  var some other function   someVar   gt  function        someObj addEventListener  click   some other function someVar      or bind valiables will be also good

User · Answer

form addEventListener  submit   save bind null  data  keyword   name value  myStemComment        function save data  keyword  name  comment  event      This is how I got event passed properly

User · Answer

just would like to add  if anyone is adding a function which updates checkboxes to an event listener  you would have to use event target instead of this to update the checkboxes

User · Answer

Quite and old question but I had the same issue today  Cleanest solution I found is to use the concept of currying   The code for that   someObj addEventListener  click   some function someVar     var some function   function someVar        return function curried func e               do something here           By naming the curried function it allows you to call Object removeEventListener to unregister the eventListener at a later execution time

User · Answer

Function prototype bind   is the way to bind a target function to a particular scope and optionally define the this object within the target function   someObj addEventListener  click   some function bind this   false     Or to capture some of the lexical scope  for example in a loop   someObj addEventListener  click   some function bind this  arg1  arg2   false     Finally  if the this parameter is not needed within the target function   someObj addEventListener  click   some function bind null  arg1  arg2   false

User · Answer

You can just bind all necessary arguments with  bind    root addEventListener  click   myPrettyHandler bind null  event  arg1            In this way you ll always get the event  arg1  and other stuff passed to myPrettyHandler   http   passy svbtle com partial-application-in-javascript-using-bind

User · Answer

There is absolutely nothing wrong with the code you ve written  Both some function and someVar should be accessible  in case they were available in the context where anonymous     function     some function someVar        was created    Check if the alert gives you the value you ve been looking for  be sure it will be accessible in the scope of anonymous function  unless you have more code that operates on the same someVar variable next to the call to addEventListener   var someVar   someVar   some other function    alert someVar   someObj addEventListener  click   function        some function someVar      false

User · Answer

The following answer is correct but the below code is not working in IE8 if suppose you compressed the js file using yuicompressor   In fact still  most of the US peoples using IE8   var someVar   someVar   some other function    alert someVar   someObj addEventListener  click                            function                              some function someVar                                                        false     So  we can fix the above issue as follows and it works fine in all browsers  var someVar  eventListnerFunc  someVar   some other function    eventListnerFunc   some function someVar   someObj addEventListener  click   eventListnerFunc  false     Hope  it would be useful for some one who is compressing the js file in production environment   Good Luck

User · Answer

You can add and remove eventlisteners with arguments by declaring a function as a variable   myaudio addEventListener  ended  funcName function   newSrc myaudio   false    newSrc is the method with myaudio as parameter funcName is the function name variable  You can remove the listener with   myaudio removeEventListener  ended  func false

User · Answer

There is absolutely nothing wrong with the code you ve written  Both some function and someVar should be accessible  in case they were available in the context where anonymous     function     some function someVar        was created    Check if the alert gives you the value you ve been looking for  be sure it will be accessible in the scope of anonymous function  unless you have more code that operates on the same someVar variable next to the call to addEventListener   var someVar   someVar   some other function    alert someVar   someObj addEventListener  click   function        some function someVar      false

User · Answer

var EV             ev              fn              elem              add  function                  this elem addEventListener this ev  this fn  false                         function cons             console log  some what               EV ev    click       EV fn   cons      EV elem   document getElementById  body        EV add       If you want to add one more listener for load event then simply add this two lines of code       EV ev    load       EV add

User · Answer

One way is doing this with an outer function   elem addEventListener  click    function numCopy      return function         alert numCopy          num      This method of wrapping an anonymous function in parentheses and calling it right away is called an IIFE  Immediately-Invoked Function Expression   You can check an example with two parameters in http   codepen io froucher pen BoWwgz   catimg addEventListener  click    function c  i     return function         c meows        i textContent   c name      s meows are      c meows         cat  catmeows

User · Answer

In 2019  lots of api changes  the best answer no longer works  without fix bug   share some working code    Inspired by all above answer    button element   document getElementById  your-button     button element setAttribute  your-parameter-name  your-parameter-value     button element addEventListener  click   your function      function your function event               when click print the parameter value        console log event currentTarget attributes your-parameter-name value

User · Answer

var EV             ev              fn              elem              add  function                  this elem addEventListener this ev  this fn  false                         function cons             console log  some what               EV ev    click       EV fn   cons      EV elem   document getElementById  body        EV add       If you want to add one more listener for load event then simply add this two lines of code       EV ev    load       EV add

User · Answer

someVar value should be accessible only in some function   context  not from listener s  If you like to have it within listener  you must do something like   someObj addEventListener  click                            function                                 var newVar   someVar                               some function someVar                                                        false     and use newVar instead   The other way is to return someVar value from some function   for using it further in listener  as a new local var    var someVar   some function someVar

User · Answer

Quite and old question but I had the same issue today  Cleanest solution I found is to use the concept of currying   The code for that   someObj addEventListener  click   some function someVar     var some function   function someVar        return function curried func e               do something here           By naming the curried function it allows you to call Object removeEventListener to unregister the eventListener at a later execution time

User · Answer

You could pass somevar by value not by reference  via a javascript feature known as closure   var someVar  origin   func   function v       console log v     document addEventListener  click  function someVar      return function   func someVar     someVar    someVar  changed    Or you could write a common wrap function such as wrapEventCallback   function wrapEventCallback callback       var args   Array prototype slice call arguments  1       return function e           callback apply this  args          var someVar  origin   func   function v       console log v     document addEventListener  click  wrapEventCallback func someVar   someVar  changed    Here wrapEventCallback func var1 var2  is like    func bind null  var1 var2

User · Answer

Why not just get the arguments from the target attribute of the event   Example    x000D   x000D  const someInput   document querySelector  button    x000D  someInput addEventListener  click   myFunc  false   x000D  someInput myParam    This is my parameter   x000D  function myFunc evt  x000D    x000D    window alert evt currentTarget myParam   x000D    x000D   lt button class  input  gt Show parameter lt  button gt  x000D   x000D   x000D    JavaScript is a prototype-oriented language  remember

User · Answer

This question is old but I thought I d offer an alternative using ES5 s  bind   - for posterity     function some func otherFunc  ev           magic happens   someObj addEventListener  quot click quot   some func bind null  some other func   false    Just be aware that you need to set up your listener function with the first param as the argument you re passing into bind  your other function  and the second param is now the event  instead of the first  as it would have been

User · Answer

Other alternative  perhaps not as elegant as the use of bind  but it is valid for events in a loop   for  var key in catalog       document getElementById key  my id   key     document getElementById key  addEventListener  click   function e            editorContent loadCatalogEntry e srcElement my id         false       It has been tested for google chrome extensions and maybe e srcElement must be replaced by e source in other browsers  I found this solution using the comment posted by Imatoria but I cannot mark it as useful because I do not have enough reputation  D

User · Answer

You can just bind all necessary arguments with  bind    root addEventListener  click   myPrettyHandler bind null  event  arg1            In this way you ll always get the event  arg1  and other stuff passed to myPrettyHandler   http   passy svbtle com partial-application-in-javascript-using-bind

User · Answer

This question is old but I thought I d offer an alternative using ES5 s  bind   - for posterity     function some func otherFunc  ev           magic happens   someObj addEventListener  quot click quot   some func bind null  some other func   false    Just be aware that you need to set up your listener function with the first param as the argument you re passing into bind  your other function  and the second param is now the event  instead of the first  as it would have been

User · Answer

I have very simplistic approach  This may work for others as it helped me  It is    When you are having multiple elements variables assigned a same function and you want to pass the reference  the simplest solution is     function Name      this methodName    Value       That s it  It worked for me   So simple

User · Answer

Also try these  IE8   Chrome  I dont know for FF    function addEvent obj  type  fn        eval  obj on  type   fn       function removeEvent obj  type        eval  obj on  type   null          Use    function someFunction  someArg   alert someArg     var object document getElementById  somObject id     var someArg  Hi there     var func function   someFunction  someArg        mouseover is inactive addEvent  object   mouseover   func      mouseover is now active addEvent  object   mouseover       mouseover is inactive   Hope there is no typos  -

User · Answer

The following approach worked well for me   Modified from here    x000D   x000D  function callback theVar    x000D    return function     x000D      theVar    x000D      x000D    x000D   x000D  function some other function     x000D    document body innerHTML     made it    x000D    x000D   x000D  var someVar   some other function  x000D  document getElementById  button   addEventListener  click   callback someVar    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D     lt body gt  x000D       lt button type  button  id  button  gt Click Me  lt  button gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

There is absolutely nothing wrong with the code you ve written  Both some function and someVar should be accessible  in case they were available in the context where anonymous     function     some function someVar        was created    Check if the alert gives you the value you ve been looking for  be sure it will be accessible in the scope of anonymous function  unless you have more code that operates on the same someVar variable next to the call to addEventListener   var someVar   someVar   some other function    alert someVar   someObj addEventListener  click   function        some function someVar      false

User · Answer

Function prototype bind   is the way to bind a target function to a particular scope and optionally define the this object within the target function   someObj addEventListener  click   some function bind this   false     Or to capture some of the lexical scope  for example in a loop   someObj addEventListener  click   some function bind this  arg1  arg2   false     Finally  if the this parameter is not needed within the target function   someObj addEventListener  click   some function bind null  arg1  arg2   false

User · Answer

nice one line alternative  element addEventListener  dragstart   evt    gt  onDragStart param1  param2  param3  evt      function onDragStart param1  param2  param3  evt        some action

User · Answer

Other alternative  perhaps not as elegant as the use of bind  but it is valid for events in a loop   for  var key in catalog       document getElementById key  my id   key     document getElementById key  addEventListener  click   function e            editorContent loadCatalogEntry e srcElement my id         false       It has been tested for google chrome extensions and maybe e srcElement must be replaced by e source in other browsers  I found this solution using the comment posted by Imatoria but I cannot mark it as useful because I do not have enough reputation  D

User · Answer

One way is doing this with an outer function   elem addEventListener  click    function numCopy      return function         alert numCopy          num      This method of wrapping an anonymous function in parentheses and calling it right away is called an IIFE  Immediately-Invoked Function Expression   You can check an example with two parameters in http   codepen io froucher pen BoWwgz   catimg addEventListener  click    function c  i     return function         c meows        i textContent   c name      s meows are      c meows         cat  catmeows

User · Answer

There is absolutely nothing wrong with the code you ve written  Both some function and someVar should be accessible  in case they were available in the context where anonymous     function     some function someVar        was created    Check if the alert gives you the value you ve been looking for  be sure it will be accessible in the scope of anonymous function  unless you have more code that operates on the same someVar variable next to the call to addEventListener   var someVar   someVar   some other function    alert someVar   someObj addEventListener  click   function        some function someVar      false

User · Answer

The following code worked fine for me  firefox    for  var i 0  i lt 3  i         element   new          create your element    element counter   i     element addEventListener  click   function e           console log this counter                             another code with this element       false       Output   0 1 2

User · Answer

Also try these  IE8   Chrome  I dont know for FF    function addEvent obj  type  fn        eval  obj on  type   fn       function removeEvent obj  type        eval  obj on  type   null          Use    function someFunction  someArg   alert someArg     var object document getElementById  somObject id     var someArg  Hi there     var func function   someFunction  someArg        mouseover is inactive addEvent  object   mouseover   func      mouseover is now active addEvent  object   mouseover       mouseover is inactive   Hope there is no typos  -

User · Answer

someVar value should be accessible only in some function   context  not from listener s  If you like to have it within listener  you must do something like   someObj addEventListener  click                            function                                 var newVar   someVar                               some function someVar                                                        false     and use newVar instead   The other way is to return someVar value from some function   for using it further in listener  as a new local var    var someVar   some function someVar

User · Answer

Why not just get the arguments from the target attribute of the event   Example    x000D   x000D  const someInput   document querySelector  button    x000D  someInput addEventListener  click   myFunc  false   x000D  someInput myParam    This is my parameter   x000D  function myFunc evt  x000D    x000D    window alert evt currentTarget myParam   x000D    x000D   lt button class  input  gt Show parameter lt  button gt  x000D   x000D   x000D    JavaScript is a prototype-oriented language  remember

User · Answer

You need   newElem addEventListener  click         handleEvent  function  event            clickImg parameter

User · Answer

Here s yet another way  This one works inside for loops    var someVar   some other function    someObj addEventListener  click     function theVar       return function   some function theVar      someVar    false

User · Answer

I have very simplistic approach  This may work for others as it helped me  It is    When you are having multiple elements variables assigned a same function and you want to pass the reference  the simplest solution is     function Name      this methodName    Value       That s it  It worked for me   So simple

User · Answer

Sending arguments to an eventListener s callback function requires creating an isolated function and passing arguments to that isolated function   Here s a nice little helper function you can use  Based on  hello world s  example above    One thing that is also needed is to maintain a reference to the function so we can remove the listener cleanly      Lambda closure chaos        Send an anonymous function to the listener  but execute it immediately     This will cause the arguments are captured  which is useful when running     within loops        The anonymous function returns a closure  that will be executed when     the event triggers  And since the arguments were captured  any vars     that were sent in will be unique to the function   function addListenerWithArgs elem  evt  func  vars       var f   function ff  vv               return  function                     ff vv                         func  vars        elem addEventListener evt  f        return f        Usage   function doSomething withThis       console log  withThis   withThis         Capture the function so we can remove it later  var storeFunc   addListenerWithArgs someElem   click   doSomething   foo        To remove the listener  use the normal routine  someElem removeEventListener  click   storeFunc

User · Answer

I was stuck in this as I was using it in a loop for finding elements and adding listner to it  If you re using it in a loop  then this will work perfectly  for  var i   0  i  lt  states array length  i           var link   document getElementById  apply   states array i  state id        link my id   i       link addEventListener  click   function e               alert e target my id                   some function states array e target my id  css url

User · Answer

Use      el addEventListener  click       function               this will give you the id value          alert this id              false     And if you want to pass any custom value into this anonymous function then the easiest way to do it is       this will dynamically create property a property     you can create anything like el  lt your  variable gt   el myvalue    hello world    el addEventListener  click       function              this will show you the myvalue          alert el myvalue              this will give you the id value          alert this id              false     Works perfectly in my project  Hope this will help

User · Answer

The following approach worked well for me   Modified from here    x000D   x000D  function callback theVar    x000D    return function     x000D      theVar    x000D      x000D    x000D   x000D  function some other function     x000D    document body innerHTML     made it    x000D    x000D   x000D  var someVar   some other function  x000D  document getElementById  button   addEventListener  click   callback someVar    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D     lt body gt  x000D       lt button type  button  id  button  gt Click Me  lt  button gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You can add and remove eventlisteners with arguments by declaring a function as a variable   myaudio addEventListener  ended  funcName function   newSrc myaudio   false    newSrc is the method with myaudio as parameter funcName is the function name variable  You can remove the listener with   myaudio removeEventListener  ended  func false

User · Answer

If I m not mistaken using calling the function with bind actually creates a new function that is returned by the bind method  This will cause you problems later or if you would like to remove the event listener  as it s basically like an anonymous function      Possible  function myCallback        code here      someObject addEventListener  event   myCallback   someObject removeEventListener  event   myCallback       Not Possible  function myCallback        code here      someObject addEventListener  event   function     myCallback     someObject removeEventListener  event      can t remove anonymous function        So take that in mind   If you are using ES6 you could do the same as suggested but a bit cleaner   someObject addEventListener  event        gt  myCallback params

User · Answer

Since your event listener is  click   you can  someObj setAttribute  quot onclick quot    quot function parameter  quot

User · Answer

nice one line alternative  element addEventListener  dragstart   evt    gt  onDragStart param1  param2  param3  evt      function onDragStart param1  param2  param3  evt        some action

User · Answer

You could pass somevar by value not by reference  via a javascript feature known as closure   var someVar  origin   func   function v       console log v     document addEventListener  click  function someVar      return function   func someVar     someVar    someVar  changed    Or you could write a common wrap function such as wrapEventCallback   function wrapEventCallback callback       var args   Array prototype slice call arguments  1       return function e           callback apply this  args          var someVar  origin   func   function v       console log v     document addEventListener  click  wrapEventCallback func someVar   someVar  changed    Here wrapEventCallback func var1 var2  is like    func bind null  var1 var2

User · Answer

Here s yet another way  This one works inside for loops    var someVar   some other function    someObj addEventListener  click     function theVar       return function   some function theVar      someVar    false

User · Answer

just would like to add  if anyone is adding a function which updates checkboxes to an event listener  you would have to use event target instead of this to update the checkboxes

User · Answer

In 2019  lots of api changes  the best answer no longer works  without fix bug   share some working code    Inspired by all above answer    button element   document getElementById  your-button     button element setAttribute  your-parameter-name  your-parameter-value     button element addEventListener  click   your function      function your function event               when click print the parameter value        console log event currentTarget attributes your-parameter-name value

User · Answer

someVar value should be accessible only in some function   context  not from listener s  If you like to have it within listener  you must do something like   someObj addEventListener  click                            function                                 var newVar   someVar                               some function someVar                                                        false     and use newVar instead   The other way is to return someVar value from some function   for using it further in listener  as a new local var    var someVar   some function someVar

User · Answer

This solution may good for looking  var some other function   someVar   gt  function        someObj addEventListener  click   some other function someVar      or bind valiables will be also good

User · Answer

form addEventListener  submit   save bind null  data  keyword   name value  myStemComment        function save data  keyword  name  comment  event      This is how I got event passed properly

User · Answer

There is a special variable inside all functions  arguments  You can pass your parameters as anonymous parameters and access them  by order  through the arguments variable   Example   var someVar   some other function    someObj addEventListener  click   function someVar       some function arguments 0       false

User · Answer

someVar value should be accessible only in some function   context  not from listener s  If you like to have it within listener  you must do something like   someObj addEventListener  click                            function                                 var newVar   someVar                               some function someVar                                                        false     and use newVar instead   The other way is to return someVar value from some function   for using it further in listener  as a new local var    var someVar   some function someVar

User · Answer

The following code worked fine for me  firefox    for  var i 0  i lt 3  i         element   new          create your element    element counter   i     element addEventListener  click   function e           console log this counter                             another code with this element       false       Output   0 1 2

User · Answer

If I m not mistaken using calling the function with bind actually creates a new function that is returned by the bind method  This will cause you problems later or if you would like to remove the event listener  as it s basically like an anonymous function      Possible  function myCallback        code here      someObject addEventListener  event   myCallback   someObject removeEventListener  event   myCallback       Not Possible  function myCallback        code here      someObject addEventListener  event   function     myCallback     someObject removeEventListener  event      can t remove anonymous function        So take that in mind   If you are using ES6 you could do the same as suggested but a bit cleaner   someObject addEventListener  event        gt  myCallback params

User · Answer

I was stuck in this as I was using it in a loop for finding elements and adding listner to it  If you re using it in a loop  then this will work perfectly  for  var i   0  i  lt  states array length  i           var link   document getElementById  apply   states array i  state id        link my id   i       link addEventListener  click   function e               alert e target my id                   some function states array e target my id  css url

User · Answer

Probably not optimal  but simple enough for those not super js savvy  Put the function that calls addEventListener into its own function  That way any function values passed into it maintain their own scope and you can iterate over that function as much as you want   Example I worked out with file reading as I needed to capture and render a preview of the image and filename  It took me awhile to avoid asynchronous issues when utilizing a multiple file upload type  I would accidentally see the same  name  on all renders despite uploading different files   Originally  all the readFile   function was within the readFiles   function  This caused asynchronous scoping issues       function readFiles input          if  input files            for i 0 i lt input files length i                 var filename   input files i  name             if       jpe g jpg png gif svg bmp   i test filename                  readFile input files i  filename                                        end readFiles        function readFile file filename                var reader   new FileReader                 reader addEventListener  load   function     alert filename     false                reader readAsDataURL file            end readFile

User · Answer

Sending arguments to an eventListener s callback function requires creating an isolated function and passing arguments to that isolated function   Here s a nice little helper function you can use  Based on  hello world s  example above    One thing that is also needed is to maintain a reference to the function so we can remove the listener cleanly      Lambda closure chaos        Send an anonymous function to the listener  but execute it immediately     This will cause the arguments are captured  which is useful when running     within loops        The anonymous function returns a closure  that will be executed when     the event triggers  And since the arguments were captured  any vars     that were sent in will be unique to the function   function addListenerWithArgs elem  evt  func  vars       var f   function ff  vv               return  function                     ff vv                         func  vars        elem addEventListener evt  f        return f        Usage   function doSomething withThis       console log  withThis   withThis         Capture the function so we can remove it later  var storeFunc   addListenerWithArgs someElem   click   doSomething   foo        To remove the listener  use the normal routine  someElem removeEventListener  click   storeFunc

User · Answer

There is a special variable inside all functions  arguments  You can pass your parameters as anonymous parameters and access them  by order  through the arguments variable   Example   var someVar   some other function    someObj addEventListener  click   function someVar       some function arguments 0       false

User · Answer

Use      el addEventListener  click       function               this will give you the id value          alert this id              false     And if you want to pass any custom value into this anonymous function then the easiest way to do it is       this will dynamically create property a property     you can create anything like el  lt your  variable gt   el myvalue    hello world    el addEventListener  click       function              this will show you the myvalue          alert el myvalue              this will give you the id value          alert this id              false     Works perfectly in my project  Hope this will help

User · Answer

The following answer is correct but the below code is not working in IE8 if suppose you compressed the js file using yuicompressor   In fact still  most of the US peoples using IE8   var someVar   someVar   some other function    alert someVar   someObj addEventListener  click                            function                              some function someVar                                                        false     So  we can fix the above issue as follows and it works fine in all browsers  var someVar  eventListnerFunc  someVar   some other function    eventListnerFunc   some function someVar   someObj addEventListener  click   eventListnerFunc  false     Hope  it would be useful for some one who is compressing the js file in production environment   Good Luck

User · Answer

Probably not optimal  but simple enough for those not super js savvy  Put the function that calls addEventListener into its own function  That way any function values passed into it maintain their own scope and you can iterate over that function as much as you want   Example I worked out with file reading as I needed to capture and render a preview of the image and filename  It took me awhile to avoid asynchronous issues when utilizing a multiple file upload type  I would accidentally see the same  name  on all renders despite uploading different files   Originally  all the readFile   function was within the readFiles   function  This caused asynchronous scoping issues       function readFiles input          if  input files            for i 0 i lt input files length i                 var filename   input files i  name             if       jpe g jpg png gif svg bmp   i test filename                  readFile input files i  filename                                        end readFiles        function readFile file filename                var reader   new FileReader                 reader addEventListener  load   function     alert filename     false                reader readAsDataURL file            end readFile

User · Answer

Since your event listener is  click   you can  someObj setAttribute  quot onclick quot    quot function parameter  quot

[javascript] How to pass arguments to addEventListener listener function?

Examples related to javascript

Examples related to dom

Examples related to addeventlistener