Pesquisa de site

javascript - document.addEventListener vs. $ (document).on

De alguma forma, encontrei um comportamento um pouco estranho ao adicionar event listeners ao document. Enquanto adicionar listeners a HTMLElements funciona bem, adicionar um listener ao document não funciona. Mas a coisa estranha é que, usando jQuery, isso funciona.

Então alguém pode explicar por que essas duas funções não estão fazendo exatamente a mesma coisa?

["customEvent1", "customEvent2"].forEach(
    (event: string) => {
        document.addEventListener(event, () => this.eventHandler());
    });

$(document).on("customEvent1 customEvent2", () => this.eventHandler());

EDIÇÃO: Bem, parece que há algum mal-entendido sobre o ambiente.

  1. A função está cercada por uma classe
  2. Estou usando TypeScript/ES6
  3. o EventHandler é um método de classe
  4. o evento personalizado é acionado com $ (document).trigger("customEvent1");

Resposta #1

O jQuery não cria um evento nativo se você usar $ (document).trigger("customEvent2"); (jquery src/event/trigger.js), ele apenas emula o manuseio de eventos nativos.

Então, se você registrar um manipulador de eventos usando document.addEventListener, você não pode usar $(document).trigger( para esses eventos.

Mas se você criar e disparar um evento usando código nativo:

var event = new Event('customEvent1');
document.dispatchEvent(event);

Então você pode capturá-lo com ambos document.addEventListener e .on do jQuery

Resposta #2

Até onde eu sei, sua função arrow está errada. Você pode fazer assim, porque a desestruturação de (event: string) está errada aqui. E como () => eventHandler() é um pouco redundante, você pode simplesmente passar o handler.

function eventHandler() {
    console.log("custom event");
}

["customEvent1", "customEvent2"].forEach(
    event => document.addEventListener(event, eventHandler)
);

var event1 = new Event('customEvent1');
document.dispatchEvent(event1);

var event2 = new Event('customEvent2');
document.dispatchEvent(event2);

E tenha em mente, você não pode acionar eventos, registrados com vanilla js, com jQuery. O jQuery apenas cria callbacks parecidos com eventos e não eventos reais. Então você tem que usar trigger nesse caso.

// ok
document.addEventListener('customEvent1', eventHandler);
var event1 = new Event('customEvent1');
document.dispatchEvent(event1);

// ok
$(document).on("customEvent2", eventHandler);
$(document).trigger("customEvent2");

// ok
$(document).on("customEvent3", eventHandler);
var event3 = new Event('customEvent3');
document.dispatchEvent(event3);

// not okay
document.addEventListener('customEvent4', eventHandler);
$(document).trigger("customEvent4");

Artigos relacionados