adding multiple event listeners to one element

Question

So my dilemma is that I don t want to write the same code twice  Once for the click event and another for the touchstart event   Here is the original code   document getElementById  first   addEventListener  touchstart   function event        do something             document getElementById  first   addEventListener  click   function event        do something               How can I compact this  There HAS to be a simpler way

User · Answer

You can just define a function and pass it  Anonymous functions are not special in any way  all functions can be passed around as values   var elem   document getElementById  first     elem addEventListener  touchstart   handler  false   elem addEventListener  click   handler  false    function handler event        do something

User · Answer

Semi-related  but this is for initializing one unique event listener specific per element   You can use the slider to show the values in realtime  or check the console  On the  lt input gt  element I have a attr tag called data-whatever  so you can customize that data if you want to    x000D   x000D  sliders   document querySelectorAll  input    x000D  sliders forEach item  gt    x000D    item addEventListener  input    e    gt    x000D      console log    item getAttribute  data-whatever    is this value    e target value     x000D      item nextElementSibling textContent   e target value  x000D        x000D     x000D   wrapper   x000D    display  flex  x000D    x000D  span   x000D    padding-right  30px  x000D    margin-left  5px  x000D    x000D      x000D    font-size  12px x000D    x000D   lt div class  wrapper  gt  x000D     lt input type  range  min  1  data-whatever  size  max  800  value  50  id  sliderSize  gt  x000D     lt em gt 50 lt  em gt  x000D     lt span gt Size lt  span gt  x000D     lt br gt  x000D     lt input type  range  min  1  data-whatever  OriginY  max  800  value  50  id  sliderOriginY  gt  x000D     lt em gt 50 lt  em gt  x000D     lt span gt OriginY lt  span gt  x000D     lt br gt  x000D     lt input type  range  min  1  data-whatever  OriginX  max  800  value  50  id  sliderOriginX  gt  x000D     lt em gt 50 lt  em gt  x000D     lt span gt OriginX lt  span gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This is my solution in which I deal with multiple events in my workflow    x000D   x000D  let h2   document querySelector  h2    x000D   x000D  function addMultipleEvents eventsArray  targetElem  handler    x000D          eventsArray map function event    x000D              targetElem addEventListener event  handler  false   x000D            x000D         x000D    x000D  let counter   0  x000D  function countP     x000D      counter    x000D      h2 innerHTML   counter  x000D    x000D   x000D     magic starts over here    x000D  addMultipleEvents   click    mouseleave    mouseenter    h2  countP   x000D   lt h1 gt MULTI EVENTS DEMO - If you click  move away or enter the mouse on the number  it counts    lt  h1 gt  x000D   x000D   lt h2 style  text-align center  font  bold 3em comic  cursor  pointer  gt 0 lt  h2 gt  x000D   x000D   x000D

User · Answer

catch volume update var volEvents    change input   var volEventsArr   volEvents split       for var i   0 i lt volknob length i          for var k 0 k lt volEventsArr length k          volknob i  addEventListener volEventsArr k   function             var cfa   document getElementsByClassName  watch televised            for  var j   0  j lt cfa length  j                  cfa j  volume   this value   100

User · Answer

Unless your do something function actually does something with any given arguments  you can just pass it as the event handler   var first   document getElementById  first    first addEventListener  touchstart   do something  false   first addEventListener  click   do something  false

User · Answer

x000D   x000D  document getElementById  first   addEventListener  touchstart  myFunction   x000D   x000D  document getElementById  first   addEventListener  click  myFunction   x000D       x000D  function myFunction e   x000D    e preventDefault   e stopPropagation   x000D    do something    x000D        x000D   x000D   x000D    You should be using e stopPropagation   because if not  your function will fired twice on mobile

User · Answer

I have a small solution that attaches to the prototype    EventTarget prototype addEventListeners   function type  listener  options extra      let arr   type    if typeof type     string        let sp   type split    s            arr   sp           for let a of arr       this addEventListener a listener options extra            Allows you to give it a string or Array  The string can be separated with a space       a comma      OR a Semicolon

User · Answer

Maybe you can use a helper function like this     events and args should be of type Array function addMultipleListeners element events handler useCapture args     if    events instanceof Array        throw  addMultipleListeners                please supply an array of eventstrings                like   quot click quot   quot mouseover quot              create a wrapper to be able to use additional arguments   var handlerFn   function e       handler apply this  args  amp  amp  args instanceof Array   args              for  var i 0 i lt events length i  1       element addEventListener events i  handlerFn useCapture          function handler e         do things        usage addMultipleListeners      document getElementById  first          touchstart   click        handler      false     Edit nov  2020  This answer is pretty old  The way I solve this nowadays is by using an actions object where handlers are specified per event type  a data-attribute for an element to indicate which action should be executed on it  and one generic document wide handler method  so event delegation    x000D   x000D  const firstElemHandler    elem  evt    gt    elem textContent    You   evt type      click     clicked     touched      const actions       click        firstElemHandler         touchstart        firstElemHandler         mouseover        firstElemHandler  elem   gt  elem textContent    Now     click me        outerHandling  elem   gt          console clear          console log  Hi from outerHandling  handle time            new Date   toLocaleTimeString                      Object keys actions  forEach key   gt  document addEventListener key  handle     function handle evt      const origin   evt target closest   data-action       return origin  amp  amp      actions evt type   amp  amp      actions evt type  origin dataset action   amp  amp      actions evt type  origin dataset action  origin  evt         true    x000D   data-action  hover     cursor  pointer    x000D   lt div data-action  outerHandling  gt     lt div id  first  data-action  firstElemHandler  gt       lt b gt Hover  click or tap lt  b gt     lt  div gt    this is handled too  on mouse over   lt  div gt  x000D   x000D   x000D

User · Answer

This mini javascript libary  1 3 KB  can do all these things  https   github com Norair1997 norjs    nor event    first      touchstart    click     doSomething  doSomething

User · Answer

Simplest solution for me was passing the code into a separate function and then calling that function in an event listener  works like a charm   function somefunction       code goes here      variable addEventListener  keyup   function        somefunction       calling function on keyup event     variable addEventListener  keydown   function        somefunction      calling function on keydown event

User · Answer

I just made this function  intentionally minified      i e f   gt e forEach o  gt i addEventListener o f    element  events  handler    Usage     i e f   gt e forEach o  gt i addEventListener o f    element    click    touchstart     event    gt           function body       The difference compared to other approaches is that the handling function is defined only once and then passed to every addEventListener   EDIT   Adding a non-minified version to make it more comprehensible  The minified version was meant just to be copy-pasted and used     element  event names  handler    gt         event names forEach   event name    gt            element addEventListener event name  handler             element    click    touchstart     event    gt            function body

User · Answer

What about something like this     focusout   keydown   forEach  function evt            self slave addEventListener evt  function event                   Here  this  is for the slave  i e   self slave              if   event type      keydown   amp  amp  event which     27     event type      focusout                     this style display    none                   this parentNode querySelector   master   style display                       this parentNode querySelector   master   value   this value                  console log  out                             false           The above is replacement of        self slave addEventListener  focusout   function event             self slave addEventListener  keydown   function event             if  event which     27        Esc

User · Answer

For large numbers of events this might help   var element   document getElementById  myId    var myEvents    click touchstart touchend  split       var handler   function  e        do something     for  var i 0  len   myEvents length  i  lt  len  i          element addEventListener myEvents i   handler  false       Update 06 2017   Now that new language features are more widely available you could simplify adding a limited list of events that share one listener   const element   document querySelector   myId     function handleEvent e           do something      I prefer string split because it makes editing the event list slightly easier   click touchstart touchend touchmove  split           map name   gt  element addEventListener name  handleEvent  false      If you want to handle lots of events and have different requirements per listener you can also pass an object which most people tend to forget   const el   document querySelector   myId     const eventHandler            called for each event on this element     handleEvent evt            switch  evt type                case  click               case  touchstart                      click and touchstart share click handler                 this handleClick e                   break              case  touchend                   this handleTouchend e                   break              default                  this handleDefault e                        handleClick e               do something            handleTouchend e               do something different            handleDefault e            console log  unhandled event   s   e type            el addEventListener eventHandler     Update 05 2019   const el   document querySelector   myId     const eventHandler         handlers            click e                   do something                    touchend e                   do something different                    default e                console log  unhandled event   s   e type                           called for each event on this element     handleEvent evt            switch  evt type                case  click               case  touchstart                      click and touchstart share click handler                 this handlers click e                   break              case  touchend                   this handlers touchend e                   break              default                  this handlers default e                      Object keys eventHandler handlers       map eventName   gt  el addEventListener eventName  eventHandler

User · Answer

I know this is an old question  but I thought some might find this approach useful  it could be applied to any similarly repetitive code   ES6    click   ontouchstart   forEach  evt   gt       element addEventListener evt  dosomething  false       ES5    click   ontouchstart   forEach  function evt        element addEventListener evt  dosomething  false

[javascript] adding multiple event listeners to one element

Examples related to javascript

Examples related to html

Examples related to dom-events