Question

como fazer um evento no java script

Answer 1

avaScript é 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.