Skip to main content Accessibility Feedback

A vanilla JavaScript equivalent of jQuery’s on() method

In vanilla JavaScript, you can listen to browser events with the addEventListener() method.

var link = document.querySelector('#some-link');
link.addEventListener('click', function (event) {

    // Prevent the link from updating the URL
    event.preventDefault();

    // Do something...

}, false);

If you’re used to the jQuery way, it can feel pretty verbose. Today, I want to share a vanilla JavaScript version of the on() method.

The on() method #

First, I’ll show you how to use it. Then, I’ll share the method itself. And finally, I’ll break down how it works.

How to use it #

The first argument is always the event to listen to. The second argument is an optional filter, if you only want to listen to events on a certain selector.

You can omit it and jump straight to argument three, the callback. This is the function to run on the event. There’s a final, optional argument: use capture. Set it to true for non-bubbling events (like focus) that you need to force to bubble.

// Listen to all click events
on('click', function(event) {
    // The thing that was clicked
    var clicked = event.target;
});

// Listen to all clicks on links with the .click-me class
on('click', '.click-me', function(event) {
    // Prevent the link from working
    event.preventDefault();
});

// Listen to focus on any element in the document with `use capture`
on('focus', function (event) {
    // The element that came into focus
    var focused = event.target;
}, true);

You can also pass in named functions if you need to be able to remove the event listener later (more on that tomorrow) or want to use the same function for multiple events.

// Do stuff on scroll
var onScrollHandler = function (event) {
    // Do something on scroll...
};

// Setup the event listener
on('scroll', onScrollHandler);

The helper method #

/*!
 * Add an event listener
 * (c) 2017 Chris Ferdinandi, MIT License, https://gomakethings.com
 * @param  {String}   event    The event type
 * @param  {Node}     elem     The element to attach the event to (optional, defaults to window)
 * @param  {Function} callback The callback to run on the event
 * @param  {Boolean}  capture  If true, forces bubbling on non-bubbling events
 */
var on = function (event, elem, callback, capture) {
    if (typeof (elem) === 'function') {
        capture = callback;
        callback = elem;
        elem = window;
    }
    capture = capture ? true : false;
    elem.addEventListener(event, callback, capture);
};

How it works #

First, we check to see if the second argument is an element selector or a callback function. If it’s our callback, we’ll shift all of the arguments over one.

if (typeof (elem) === 'function') {
    capture = callback;
    callback = elem;
    elem = window;
}

Next, we check to see if the capture argument is set. If not, we’ll use false instead of null.

capture = capture ? true : false;

Finally, we’ll add our event listener.

elem.addEventListener(event, callback, capture);

🔥 Hot off the press! I just launched a new pocket guide. Learn about ES6 arrow functions, let and const, function hoisting, and more.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips