Vanilla Javascript - #20 Delegação de Eventos

Na aula de hoje vamos aprender sobre delegação de eventos no Javascript. � muito importante entender essa técnica principalmente quando criamos elementos novos no nosso DOM.

Delegação de eventos

Normalmente precisamos delegar eventos ao pai quando criamos elementos dinâmicamente, ou seja, elementos que não existiam no site quando da leitura inicial da árvore do DOM.

(function readyJS(win,doc){
    'use strict';

    let btn=doc.querySelector("#btn");
    let main=doc.querySelector(".main");

    function createElement(event)
    {
        const newButton=doc.createElement("button");
        newButton.id="newButton";
        newButton.innerHTML='New Button';
        main.appendChild(newButton);
    }

    function alertar(event)
    {
        alert('New Button');
    }

    function optEvents()
    {
        if(event.target.id==='newButton'){
            alertar();
        }else if(event.target.id==='btn'){
            createElement();
        }
    }
    main.addEventListener("click",optEvents,false);
})(window, document);

Repare no exemplo acima que o newButton foi criado dinâmicamente, logo se você tentar atribuir um evento diretamente a ele não vai surtir efeito, pois quando da abertura do site este elemento não existia. Para tanto, foi delegado o evento ao elemento pai, no caso a div main e aí sim consigo utilizar meu novo botão.

Sucesso nos códigos e na vida!