what's the equivalent of jquery's 'trigger' method without jquery?

Question

what's the equivalent of jQuery's trigger method without jQuery?

e.g., how do i do something like $('.blah').trigger('click'); without jQuery?

Answer 1

event.initMouseEvent("click"...

Here is an example:

function simulateClick(elId) {
    var evt;
    var el = document.getElementById(elId);
    if (document.createEvent) {
        evt = document.createEvent("MouseEvents");
        evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    (evt) ? el.dispatchEvent(evt) : (el.click && el.click());
}

var foo = document.getElementById("hey");

foo.onclick = function () {alert("bar");}

simulateClick("hey");

Answer 2

in Javascript

var event = document.createEvent("Event");
event.initEvent("click", false, true); 
document.getElementById("blah").dispatchEvent(event);

is equivalent for jQuery trigger as below

$('#blah').trigger('click');

Answer 3

Here is my example. Working perfectly in all situations

var d=document.createEvent("MouseEvents"),
    c=document.createEvent("MouseEvents"),
    p=document.createEvent("MouseEvents");
    d.initMouseEvent("mousedown",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
    c.initMouseEvent("click"    ,true,true,window,0,0,0,0,0,false,false,false,false,0,null);
    p.initMouseEvent("mouseup"  ,true,true,window,0,0,0,0,0,false,false,false,false,0,null);

    var element =// some selector;

    element.dispatchEvent(d);
    element.dispatchEvent(c);
    element.dispatchEvent(p);

Answer 4

TL;DR: create an Event Object and pass it to element.dispatchEvent(event)

function simulateClick() {
  const event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
  });
  const element = document.getElementById('checkbox');
  element.dispatchEvent(event);
}

More info https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events#triggering_built-in_events