5

No jQuery, quando quero fazer um trigger para um evento existente, eu faço assim:

$(function (){

  $('#button').on('click', function () {
    console.log('olá mundo');
  });
  $('#button').trigger('click');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button">Clique em mim</button>

Porém já tem um bom tempo que eu não uso mais o jQuery.

Como é que posso disparar (trigger) um evento SEM USAR JQUERY?

5 Respostas 5

9

Gerar eventos nativos em JavaScript nativo pode ser uma dor de cabeça. Lembro de há uns tempos ter feito um teste para gerar evento wheel no MooTools e a função para disparar esse evento ficou assim:

	function dispatchFakeWheel(type, wheelDirection){

		var event;
		try {
			// Firefox
			event = document.createEvent('MouseEvents');
			event.initMouseEvent(type, true, true, window, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0, null);
			attachProperties(event, wheelDirection);
			window.dispatchEvent(event);
		} catch (e){}

		try {
			// Chrome, PhantomJS, Safari
			event = document.createEvent('WheelEvent');
			event.initMouseEvent(type, 0, 100, window, 0, 0, 0, 0, null, null, null, null);
			attachProperties(event, wheelDirection);
			window.dispatchEvent(event);
		} catch (e){}

		try {
			// IE9
			event = document.createEvent('HTMLEvents');
			event.initEvent(type, true, false);
			attachProperties(event, wheelDirection);
			window.dispatchEvent(event);
		} catch (e){}

		try {
			// IE10+, Safari
			event = document.createEvent('MouseEvents');
			event.initEvent(type, true, true);
			attachProperties(event, wheelDirection);
			window.dispatchEvent(event);
		} catch (e){}

		try {
			// IE8
			event = document.createEventObject();
			document.documentElement.fireEvent(type, event);
		} catch (e){}
	}

Mas hoje em dia há uma nova API, Event, que tenta normalizar isto e ser igual em todos os browsers. O IE não suporta, mas os outros suportam.

Segundo essa API podem criar-se também custom-events, ou seja com o nome que queiramos. Exemplo:

const btn = document.querySelector('button');

function handler(e){
console.log(e.type, e.isTrusted);
}
btn.addEventListener('click', handler);
btn.addEventListener('meu-super-evento', handler);

var evt = new Event("click", {
  "bubbles": true,
  "cancelable": false
});
btn.dispatchEvent(evt); // evento click simulado

var evt = new Event("meu-super-evento", {
  "bubbles": true,
  "cancelable": false
});
btn.dispatchEvent(evt); // evento meu-super-evento
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button">Clique em mim</button>

7

Nativamente isso deverá ser feito através do método dispatchEvent de um objeto EventTarget. O parâmetro indicado neste método deverá ser um objeto do tipo Event. Ou seja, primeiro precisamos criar a instância do evento que desejamos disparar; nesse caso, para exemplificar, utilizarei os eventos click e mouseover.

const click = new Event("click");
const mouseOver = new Event("mouseover");

Buscamos pelo elemento alvo no DOM:

const button = document.getElementById("button");

E disparamos os respectivos eventos:

button.dispatchEvent(click);
button.dispatchEvent(mouseOver);

Veja funcionando:

const click = new Event("click");
const mouseOver = new Event("mouseover");
const button = document.getElementById("button");

button.addEventListener("click", function (event) {
	alert("Click");
});

button.addEventListener("mouseover", function (event) {
	this.style.color = "red";
});

button.dispatchEvent(click);
button.dispatchEvent(mouseOver);
<button id="button">Clique em mim</button>

5

Outra forma será utilizando o dispatchEvent, que implica criar previamente o objeto que representa o evento.

const botao = document.getElementById("button");

botao.addEventListener('click', function() {
  console.log('olá mundo');
});


let evento = new Event('click'); //criar o evento para o click

botao.dispatchEvent(evento); //lançar o evento criado
<button id="button">Clique em mim</button>

O evento pode ser configurado a nível de algumas propriedades:

  • "bubbles": (Opcional) Booleano que indica se o event tem efeito de bolha. O valor por defeito é falso.
  • "cancelable": (Opcional) Booleano que indica se o evento é cancelável. O valor por defeito é falso.
  • "composed": (Opcional) Booleano que indica se este evento vai ativar outros eventos fora de um shadow root. O valor por defeito é falso.

Poderíamos assim criar um objeto MouseEvent configurando as suas propriedades antes de ser lançado:

const botao = document.getElementById("button");

botao.addEventListener('click', function() {
  console.log('olá mundo');
});


let evento = new MouseEvent('click', { /*agora MouseEvent*/
    'bubbles': true,
    'cancelable': true
});

botao.dispatchEvent(evento); //lançar o evento
<button id="button">Clique em mim</button>

Referência para criação manual de eventos no MDN

Referência para o objeto Event no MDN

2
  • A resposta parece boa, mas na descrição esta composed e no exemplo esta view, acho que isto meio confuso.
    – Syzoth
    Commented 8/11/2017 às 13:13
  • @GuilhermeNascimento Agradeço o comentário. Sim de fato deixei como estava o exemplo no MDN, mas concordo que fica mais claro sem view
    – Isac
    Commented 8/11/2017 às 13:30
3

Não seria apenas a utilização do .click()?

function Hello() {
  console.log('olá mundo');
}

document.getElementById('button').click();
<button id="button" onclick="Hello()">Clique em mim</button>

Veja também a compatibilidade antes de adotar uma solução definitiva.

Nesta pergunta possui várias outras opções de como fazer isso.

1
  • Sim é um atalho e funciona, sem precisar escrever tudo, o new Event é interessante para algumas configurações e/ou outros tipos de eventos e até eventos customizados. no caso atual .click resolve perfeitamente ;) +1
    – Syzoth
    Commented 8/11/2017 às 13:11
3

Para dispara um evento EventTarget.dispatchEvent():

Dispara um Event para o EventTarget especificado, invocando os EventListeners especificados, em uma ordem apropriada. O processamento normal das regras (including the capturing and optional bubbling phase) aplica-se a eventos disparados manualmente com dispatchEvent(). EventTarget.dispatchEvent()

Para capturar um evento addEventListener():

O addEventListener() registra uma única espera de evento em um único alvo. O alvo do evento pode ser um único elemento em um documento, o documento em si, uma janela, ou um XMLHttpRequest. addEventListener

//Atribuo o elemento a variável btn
var btn = document.getElementById('btn');

//Crio um evento novo chamado Clicado
var event = new Event('Clicado');

//Criar uma função para executar quando evento clicado for capturado
btn.addEventListener("Clicado", function(){
  console.log("o evento clicado foi disparado!!");
}, false);

//Dispara o evento
btn.dispatchEvent(event);

//IE e browsers em versões antigos utilizam o fireEvent
//btn.fireEvent("on" + event.eventType, event);
<button id="btn">Botão</button>

0

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 .