9

Pesquisando encontrei Event e CustumEvent, ambas podem ser usadas para criar eventos, e para controlar inscrições, remoções e emissões do evento deve-se usar EventTarget, mas não entendi como funcionam, por exemplo, como eu poderia criar um evento personalizado de clique?

//Cria um evento de clique personalizado
const myClick = new Event('myClick');

//Alguma coisa para guardar as chamadas de "addEventListener"

//Adiciona um ouvinte do evento personalizado aos elmentos
myElement.addEventListener('myClick', event => console.log(event));
myOtherElement.addEventListener('myClick', event => console.log(event));

//Quando houver um clique na tela
window.addEventListener('click', function(event) {
    //Percorre uma lista onde ficaria armazenado os elementos que foram adicionado ouvintes do evento
    for(element of elementList) {
        //Se o elemento for igual ao elemento principal do clique na janela
        if (event.target === element) {
            //Dispara o evento customizado de clique
            element.dispatchEvent(myClick);
        }
    }
});

Estou no caminho certo? Como fazer para guardar as chamadas de addEventListener?

O exemplo é exatamente igual ao evento de clique que já existe, é apenas um exemplo. No momento quero saber apenas como se faz nos navegadores modernos, não estou preocupado com compatibilidade

4 Respostas 4

18
+100

Basicamente, para se criar um evento customizado e escutá-lo, você deve:

  1. Criar o evento instanciando um novo Event. Como em new Event('eventName');
  2. Disparar o evento usando o método dispatchEvent – disponível no protótipo de EventTarget, implementado por objetos como o Element. Para isso, passa-se a instância criada anteriormente ao dispatchEvent.
  3. Escutar o evento usando o método addEventListener de algum Element.

O exemplo abaixo mostra todo o processo:

// Para criar o evento:
const myClickEvent = new Event('myClick');

const myDiv = document.querySelector('#my-div');

// Para ouvir o evento:
myDiv.addEventListener('myClick', function () {
  console.log('Evento customizado disparado!');
});

myDiv.addEventListener('click', function () {
  // Disparar o evento:
  myDiv.dispatchEvent(myClickEvent);
});
<div id="my-div">Minha div (clique)</div>

Para saber mais, sugiro a leitura:

2
  • Porém dessa forma teria que adicionar dois eventos sempre, não seria automático. Por exemplo, supondo que eu queira adicionar um evento em três elementos, teria que adicionar também três ouvintes do evento de click normal nesses mesmo 3 elementos, se for assim seria melhor adicionar só um e encapsular o que tornaria o meu evento especial numa função que chamaria na primeira linha do callback do ouvinte
    – Costamilam
    Commented 29/09/2018 às 20:44
  • É o que você precisa fazer. Creio que não haja outra forma. Commented 29/09/2018 às 22:02
7
+200

Se a ideia é disparar o evento myClick sempre que houver um click, você pode fazer o seguinte:

const myClick = new Event('myClick');

document.addEventListener('click', event => {
    EventTarget.prototype.dispatchEvent.call(event.target, myClick);
});

Assim, sempre que ocorrer o evento click, será disparado o evento myClick para o mesmo elemento.

const myClick = new Event('myClick');

document.addEventListener('click', event => {
    EventTarget.prototype.dispatchEvent.call(event.target, myClick);
});

const lis = document.querySelectorAll('li');

for (let li of lis) {
  li.addEventListener('myClick', event => console.log(event.target));
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Perceba que mesmo que todos os elementos <li> possuem o evento myClick, apenas do elemento pressionado é disparado.


Porém, como o evento tratado é o click em document, só funcionará se o elemento pertencer a árvore de nós em document e o evento tratado se propagar por esta. Se o elemento não pertencer a árvore ou o evento não for propagante, a solução não funcionará. Por exemplo, veja abaixo o exemplo de um elemento que é criado dinamicamente e não é inserido na árvore em document. O evento click de virtual não será propagado até document e, portanto, não irá disparar o myClick.

const myClick = new Event('myClick');

document.addEventListener('click', event => {
    EventTarget.prototype.dispatchEvent.call(event.target, myClick);
});

const virtual = document.createElement('span');

virtual.addEventListener('myClick', event => console.log(event.target));
virtual.click();

Porém, se adicionar o elemento na árvore, document.body.appendChild(virtual), o evento click irá disparar myClick normalmente. Para eventos não propagantes, não funcionará mesmo que o elemento pertença à árvore de nós.

1
  • Acabei voltando nessa pergunta agora e apenas uma dúvida: tem algum motivo específico para utilizar o call (EventTarget.prototype.dispatchEvent.call) ao invés de simplesmente já aplicar a diretamente função event.target.dispatchEvent, que já é uma instância de EventTarget? Commented 15/12/2020 às 12:31
1
var evt = document.createEvent("Event");
evt.initEvent("myEvent",true,true);

// parametro customizado
evt.foo = "bar";

//registrar
document.addEventListener("myEvent",myEventHandler,false);

//invocar
document.dispatchEvent(evt);

Este é apenas um exemplo simples, maiores detalhes em: http://www.kaizou.org/2010/03/generating-custom-javascript-events/

7
  • Sua resposta não adiciona nada a resposta já existente, além disso, assim como a outra, ela não responde a pergunta
    – Costamilam
    Commented 10/10/2018 às 22:20
  • O que falta para ficar completa? Commented 10/10/2018 às 22:26
  • A dúvida é como armazenar as chamadas de addEventListener
    – Costamilam
    Commented 10/10/2018 às 23:18
  • Defina o que é armazenar as chamadas de um evento. Seria saber quantas vezes um evento foi acionado? Commented 11/10/2018 às 1:12
  • Quando há uma chamada de addEventListener, é adicionado a uma lista para que depois seja executado o callback. Como pegar essa lista? Em algum lugar precisa ser armazenado, mas onde?
    – Costamilam
    Commented 11/10/2018 às 1:27
0

Consegui fazer algo semelhante, talvez não seja a melhor maneira, mas funciona:

//Cria um evento de clique personalizado
const myClick = new Event('myClick');

//Salva a função em um lugar qualquer, no caso, escolhi o protótipo de EventTarget
EventTarget.prototype._addEventListener = EventTarget.prototype.addEventListener;

//Adiciona uma propriedade ao protótipo de EventTarget (poderia ser em qualquer outro lugar)
EventTarget.prototype.customListener = {
  myClick: []
};

//Altera a função addEventListener
EventTarget.prototype.addEventListener = function(type, listener, options) {
  //Se não houver a variável, a cria
  if (!EventTarget.prototype.customListener[type]) {
    EventTarget.prototype.customListener[type] = [];
  }

  //Adiciona o listener à lista
  EventTarget.prototype.customListener[type].push({
    element: this,
    callback: listener
  });

  //Chama a função antiga
  this._addEventListener(type, listener, options);
}

//Adiciona um ouvinte do evento personalizado aos elmentos
document.querySelector('button').addEventListener('myClick', event => console.log('Clicked on button'));
document.querySelector('a').addEventListener('myClick', event => console.log('Clicked on link'));

//A lista de eventos:
console.log(EventTarget.prototype.customListener)

//Quando houver um clique na tela
window.addEventListener('click', function(event) {
    //Percorre uma lista onde ficaria armazenado os elementos que foram adicionado ouvintes do evento
    for(listener of EventTarget.prototype.customListener.myClick) {
        //Se o elemento for igual ao elemento principal do clique na janela
        if (event.target === listener.element) {
            //Dispara o evento customizado de clique
            listener.callback(event);
        }
    }
});
<button>Click here!</button>

<a href="#!">Click here too!</a>

Vou implementar num projeto e depois postar um exemplo mais útil (talvez cross-browser também)

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 .