plainJS

Functions / Events

Trigger an event

jQuery $.trigger(), $.click(), $.focus(), $.submit(), etc.

2015 page

This is the original page from 2015, kept at its address while the tested rewrite is in progress. The code is of its time: it ran in Internet Explorer and does not use what browsers have gained since. The rewrite replaces it here.

In short

How to create and dispatch events. Corresponding functions to jQuery’s $.trigger(), $.click(), $.blur(), $.keyup(), $.mousedown(), etc.

There are a few convenient methods for triggering an event on specific elements:

js
var el = document.querySelector('input[type="text"]');

// for any element
el.click();

// for inputs and textareas
el.focus();
el.blur();

// for form elements
var my_form = document.querySelector('form');

my_form.submit();
my_form.reset();

In contrast to jQuery, it is not possible to pass an event handler as argument to any of these methods. Read up on binding event handlers in plain JavaScript.

If you need to trigger other events, such as mousedown or keyup, use the following helper function:

js
function triggerEvent(el, type){
   if ('createEvent' in document) {
        // modern browsers, IE9+
        var e = document.createEvent('HTMLEvents');
        e.initEvent(type, false, true);
        el.dispatchEvent(e);
    } else {
        // IE 8
        var e = document.createEventObject();
        e.eventType = type;
        el.fireEvent('on'+e.eventType, e);
    }
}

Usage example:

js
var el = document.querySelector('input[type="text"]');
triggerEvent(el, 'mousedown');

w3schools offers a useful list of available HTML DOM events. These are HTML attribute names; when triggering an event with the above given helper function, omit the “on” prefix of the name to get the event type. For example, use “mouseup” instead of “onmouseup”.

With triggerEvent() you may also dispatch any custom event that is bound to the element.