Fire an event using pure Javascript

Question

I would like to know how to dispatch an event using Javascript. I tried using the following code:

var atual = document.getElementById('teste');
atual.addEventListener('mouseover', function(){ alert('HUE HUE HUE BR') });
atual.dispatchEvent('mouseover');

but then an error occurs saying that the event does not exist:

Uncaught Invalidstateerror: Failed to execute 'dispatchEvent' on 'Eventtarget': The Event provided is null.

Jsfiddle.

Answer 1

Following the advice of Mr Wakim, I checked the documentation and found that the event is not created alone, that is to say it is necessary before firing it create it, it was like this:

var atual = document.getElementById('teste');
atual.addEventListener('mouseover', function(){ alert('HUE HUE HUE BR') });
atual.dispatchEvent(new Event('mouseover'));

Flw

Answer 2

I needed something similar, but for mousewheel a while back and I made this code:

function createFakeMouseEvent(event, elemento) {

    var evt;
    if (!(window.mozInnerScreenX == null)) {
        // Firefox
        evt = document.createEvent("MouseEvents");
        evt.initMouseEvent(event, true, true, window, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0, null);
        elemento.dispatchEvent(evt);
    } else {

        if ('onwheel' in document) {
            // Chrome, PhantomJS, Safari
            evt = document.createEvent("MouseEvents");
            evt.initMouseEvent(event, 0, 100, window, 0, 0, 0, 0, null, null, null, null);
            elemento.dispatchEvent(evt);
        } else if ( !! document.createEvent) {
            // IE9
            evt = document.createEvent("HTMLEvents");
            evt.initEvent(event, true, false);
            elemento.dispatchEvent(evt);
        } else if (document.documentMode == 9) {
            // IE10+, Safari
            var evt = document.createEvent("MouseEvents");
            evt.initEvent(event, true, true);
            elemento.dispatchEvent(evt);
        } else {
            // IE8
            var evt = document.createEventObject();
            elemento.fireEvent(event, evt);
        }
    }
}

The code has become a bit complex because different browsers have different ways to trigger events... but it should work for whatever.

Demo: http://jsfiddle.net/vmvbb3hf/

Answer 3

An alternative that can be simpler is to build a layered architecture, which allows you to call your code directly without being through the event system.

function huehue(){
    alert('HUE HUE HUE BR')
}

// Agora o evento só delega para uma função pronta
var atual = document.getElementById('teste');
atual.addEventListener('mouseover', function(){ huehue() });

// E como huehue passou a ser uma função normal podemos chamá-la diretamente:
huehue();