Binding multiple events to a listener without JQuery

Question

While working with browser events  I ve started incorporating Safari s touchEvents for mobile devices  I find that addEventListeners are stacking up with conditionals  This project can t use JQuery   A standard event listener      option 1    window addEventListener  mousemove   this mouseMoveHandler  false   window addEventListener  touchmove   this mouseMoveHandler  false       option 2  only enables the required event    var isTouchEnabled   window Touch    false  window addEventListener isTouchEnabled    touchmove     mousemove   this mouseMoveHandler  false     JQuery s bind allows multiple events  like so     window  bind  mousemove touchmove   function e          do something        Is there a way to combine the two event listeners as in the JQuery example  ex   window addEventListener  mousemove touchmove   this mouseMoveHandler  false     Any suggestions or tips are appreciated

User · Answer

One way how to do it    x000D   x000D  const troll   document getElementById  troll    x000D   x000D    mousedown    mouseup   forEach type   gt    x000D   if  type      mousedown     x000D    troll addEventListener type       gt  console log  Mouse is down     x000D     x000D          else if  type      mouseup     x000D                  troll addEventListener type       gt  console log  Mouse is up     x000D            x000D      x000D  img   x000D    width  100px  x000D    cursor  pointer  x000D    x000D   lt div id  troll  gt  x000D     lt img src  http   images mmorpg com features 7909 images Troll png  alt  Troll  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Some compact syntax that achieves the desired result  POJS       mousemove touchmove  split      forEach function e         window addEventListener e mouseMoveHandler false

User · Answer

In POJS  you add one listener at a time  It is not common to add the same listener for two different events on the same element  You could write your own small function to do the job  e g       Add one or more listeners to an element     param  DOMElement  element - DOM element to add listeners to     param  string  eventNames - space separated list of event names  e g   click change      param  Function  listener - function to attach for each event as a listener    function addListenerMulti element  eventNames  listener      var events   eventNames split         for  var i 0  iLen events length  i lt iLen  i          element addEventListener events i   listener  false          addListenerMulti window   mousemove touchmove   function            Hopefully it shows the concept     Edit 2016-02-25  Dalgard s comment caused me to revisit this  I guess adding the same listener for multiple events on the one element is more common now to cover the various interface types in use  and Isaac s answer offers a good use of built   in methods to reduce the code  though less code is  of itself  not necessarily a bonus   Extended with ECMAScript 2015 arrow functions gives   function addListenerMulti el  s  fn      s split      forEach e   gt  el addEventListener e  fn  false        A similar strategy could add the same listener to multiple elements  but the need to do that might be an indicator for event delegation

User · Answer

I have a simpler solution for you   window onload   window onresize    event    gt          Your Code Here     I ve tested this an it works great  on the plus side it s compact and uncomplicated like the other examples here

User · Answer

AddEventListener take a simple string that represents event type  So You need to write a custom function to iterate over multiple events   This is being handled in jQuery by using  split      and then iterating over the list to set the eventListeners for each types          Add elem as a property of the handle function        This is to prevent a memory leak with non-native events in IE      eventHandle elem   elem          Handle multiple events separated by a space        jQuery      bind  mouseover mouseout   fn       types   types split              var type  i   0  namespaces       while    type   types  i            lt -- iterates thru 1 by 1

User · Answer

For me  this code works fine and is the shortest code to handle multiple events with same  inline  functions   var eventList     change    keyup    paste    input    propertychange           for event of eventList        element addEventListener event  function                your function body            console log  you inserted things by paste or typing etc

User · Answer

Cleaning up Isaac s answer     mousemove    touchmove   forEach function e      window addEventListener e  mouseMoveHandler         EDIT  ES6 helper function   function addMultipleEventListener element  events  handler      events forEach e   gt  element addEventListener e  handler

User · Answer

ES2015   let el   document getElementById  el    let handler      gt  console log  changed      change    keyup    cut   forEach event   gt  el addEventListener event  handler

[javascript] Binding multiple events to a listener (without JQuery)?

Examples related to javascript

Examples related to jquery

Examples related to touch

Examples related to addeventlistener