2

Gostaria de saber como se despacha um evento usando JavaScript. Tentei usando o seguinte código:

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

mas aí acontece um erro falando que o evento não existe:

Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event provided is null.

JSFiddle.

3
  • 1
    Recomendo dar uma olhada na documentação do método dispatchEvent, o parâmetro dele é um objeto Event não o nome do evento. Um exemplo seria: dispatchEvent(new Event('mouseover'));
    – Wakim
    22/08/2014 às 17:46
  • 1
    Valew cara! Descobri e na verdade eu tinha que criar o evento, ficou assim: var atual = document.getElementById('teste'); atual.addEventListener('mouseover', function(){ alert('HUE HUE HUE BR') }); atual.dispatchEvent(new Event('mouseover')); 22/08/2014 às 17:50
  • Possível duplicata de Como fazer um trigger para um evento SEM jQuery?
    – Woss
    6/10/2017 às 13:50

3 Respostas 3

2

Seguindo o conselho do colega Wakim, verifiquei na documentação e descobri que o evento não se cria sozinho, ou seja é necessario antes de dispara-lo cria-lo, ficou assim:

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

Flw

1

Precisei de algo parecido, mas para o mousewheel à uns tempos e fiz este código:

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);
        }
    }
}

O código ficou meio complexo porque browsers diferentes têm maneiras diferentes de disparar eventos... Mas deve funcionar para o que quer.

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

1
  • Valew cara com certeza no futuro pode ser util mas como o projeto e IE9+ o dispacht normal vai servir. 22/08/2014 às 18:09
1

Uma alternativa que pode ser mais simples é fazer uma arquitetura em camadas, o que permite chamar seu código diretamente sem ser por intermédio do sistema de eventos.

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();
2
  • Então Hugo o problema é normalmente quando vinculo uma função a um listener quero ter acesso ao target(this) por isso essa solução não é utilizada, Mas em um outro caso pode ser uma opção. Valew. 25/08/2014 às 13:49
  • Ve pode fazer huehue receber o nó como parâmetro: No event listener vc faz huehue(this) e na chamada do lado de fora vc faz huehue(atual)
    – hugomg
    25/08/2014 às 13:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .