Binding Multiple Events to a Listener (Without Jquery)

Binding multiple events to a listener (without JQuery)?

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<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 => 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.

Event listener for current and future elements Without jQuery

The method you are looking for is called event capturing. You can do it like this:

document.querySelector('body').addEventListener('click', function(evt) {
    // Do some check on target
    if ( evt.target.classList.contains('some-class') ) {
        // DO CODE
    }
}, true); // Use Capturing

adding multiple event listeners to one element

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 ["click","mouseover"])';
  }
  //create a wrapper to be able to use additional arguments
  var handlerFn = function(e){
    handler.apply(this, args && args instanceof Array ? args : []);
  }
  for (var i=0;i<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).

const firstElemHandler = (elem, evt) =>
  elem.textContent = `You ${evt.type === "click" ? "clicked" : "touched"}!`;
const actions = {
  click: {
    firstElemHandler,
  },
  touchstart: {
    firstElemHandler,
  },
  mouseover: {
    firstElemHandler: elem => elem.textContent = "Now ... click me!",
    outerHandling: elem => {
      console.clear();
      console.log(`Hi from outerHandling, handle time ${
        new Date().toLocaleTimeString()}`);
    },
  }
};

Object.keys(actions).forEach(key => document.addEventListener(key, handle));

function handle(evt) {
  const origin = evt.target.closest("[data-action]");
  return origin &&
    actions[evt.type] &&
    actions[evt.type][origin.dataset.action] &&
    actions[evt.type][origin.dataset.action](origin, evt) ||
    true;
}

[data-action]:hover {
  cursor: pointer;
}

<div data-action="outerHandling">
  <div id="first" data-action="firstElemHandler">
    <b>Hover, click or tap</b>
  </div>
  this is handled too (on mouse over)
</div>

How can I trigger the same function from multiple events with jQuery?

You can use .on() to bind a function to multiple events:

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

Or just pass the function as the parameter to normal event functions:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

Is it possible to bind multiple event handlers to JqGrid events without overwriting previous ones?

I think you ask about an important problem existing in the current version of jqGrid. It's difficult to implement more as one event handler in jqGrid now. The problem is not important for small projects where you use jqGrid, but can be important in case that you want construct some classes which interprets jqGrid. Your current workaround is OK, but have the restriction which you understand yourself. The main problem that in the way you can implement only one more additional loadCompleteEx handler.

What I would suggest you is the usage of jQuery.trigger or better jQuery.triggerHandler. You can use it together with jQuery.bind and jQuery.unbind. In the way you can define any number of event handlers which works like standard jQuery events.

For example,

var grid = $("#list");

grid.bind('jqGridLoadComplete',function(e,data) {
    alert ("in first jqGridLoadComplete event handler. Called for the page " +
           data.page);
});
grid.jqGrid({
    // jqGrid parameters
    // ...
    loadComplete: function(data) {
        alert("main load complete");
        $(this).triggerHandler("jqGridLoadComplete", data);
    }
});
grid.bind('jqGridLoadComplete.jqGrid',function(e,data) {
    alert ("in second jqGridLoadComplete event handler. Called for the page " +
           data.page);
});

In the second jQuery.bind I used namespaced event 'jqGridLoadComplete.jqGrid' from the namespace 'jqGrid'. So you can use everything which you know (and which you need) about standard events in jQuery.

See the corresponding demo here. Try to switch the pages in the grid or change the sorting to call loadComplete.

I bind the second jqGridLoadComplete after the jqGrid definition. Because my demo uses datatype:'local' the first call of loadComplete will be before the binding executed. So at the first loadComplete execution will be the second jqGridLoadComplete event handler not called. So you should better to bind your event handler before the jqGrid definition. In the case you can be sure that the event will be always called.

UPDATED: IMPORTANT!!!. One don't need to trigger jqGridLoadComplete event explicitly inside of loadComplete if you use the current version of jqGrid. jqGrid do this already for you. The above code was written before the corresponding functionality are included in the main code of jqGrid. The answer just described the main idea how multiple event handlers could be implemented in jqGrid. After writing the answer I posted some pull requests to trirand with my suggestion to implement jQuery events in jqGrid. Starting with the version 4.3.2 (see here) jqGrid support the events.

How to simulate namespaced events or unbind individual events WITHOUT jQuery?

You can bind and unbind specific handlers.

if (adIsInView("ad1") == false) {
    var ad1_listener = function() {
        if (adIsInView("ad1") == true) {
            displayAd("ad1");
            window.removeEventListener("scroll", ad1_listener);
        } 
    }
    window.addEventListener("scroll", ad1_listener);
}

You can go a step further and do:

function register_ad(ad) {
    function listener() {
        if (adIsInView(ad) === true) {
            displayAd(ad);
            window.removeEventListener("scroll", listener);
        } 
    }
    window.addEventListener("scroll", listener);
}

if (adIsInView("ad1") === false) {
    register_ad("ad1");
}

---

Related Topics