JavaScript é uma linguagem orientada a eventos. JavaScript é uma linguagem orientada a eventos. JavaScript..

Ok.. acho que já deu para entender.

js-logo

Eventos

JavaScript é um dialeto ECMAScript, orientado a objetos, com suporte a programação funcional, e também, podemos dizer que js é orientado a eventos.

Afinal de contas, o browser nos avisa qndo: o dom termina de carregar, qndo uma imagem está pronta, qndo o usuário clica em algo, qndo passa o mouse em algum elemento, qndo sai de algum campo, pressiona uma tecla…

Todos esses quandos são eventos. E no js, lemos como:

onload, onkeypress, onkeyup, onkeydown, onclick, onchange, onblur, onfocus, onmouseover, onmouseout…

Mas esse lado “orientado a eventos” do javascript, ainda é mal compreendido. Não adianta programarmos JS como se fosse Java. Existem particularidades da linguagem que a fazem ser muito versátil, e é isso que devemos aprender a usar.

Programando Orientado a Eventos.

CustomEvents

Além dos eventos disparados pelo usuário e browser, podemos criar os nossos próprios eventos customizados!

Isso nos ajudará a manter um código mais organizado e mais condizente com o propósito da linguagem que estamos usando. É natural pensarmos que “quando o usuário clicar em um botão, ou quando ele trocar de certo campo, tal coisa deve ser acionada”.

Mas e se além dos eventos disparados pelo user e pelo browser, o nosso próprio código disparasse eventos nos informando que algo aconteceu ?

É exatamente esse o propósito do CustomEvents.

Eu creio que usar isso ajudará na organização do código, ajudando a evitar o temido Callback Hell, desde que paremos de pensar nas outras tantas linguagens de programação que sabemos, e passemos a pensar em javascript.

Para quem sabe Design Patterns, creio que vc pode pensar que é um Observer nativo.

Código

<div id="t"></div>
<script>
var myElement = document.getElementById("t");
myElement.addEventListener("userLogin", function(e) {
    console.info("Event is: ", e);
    console.info("Custom data is: ", e.detail);
});

// First create the event
var myEvent = new CustomEvent("userLogin", {
    detail: {
        username: "davidwalsh"
    }
});

// Trigger it!
myElement.dispatchEvent(myEvent);
</script>

Retirei o trecho de código acima daqui: JavaScript CustomEvent

Achei que não tinha sentido rescrever um código tão simples, e não citar a fonte, até pq lá explica bem como fazer. A idéia desse meu post, é mais pensar sobre porque e quando usar.