Eventos personalizados JavaScript – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá sobre os eventos personalizados de JavaScript, como criar um evento personalizado e despachá-lo.

Introdução aos eventos personalizados JavaScript

A função a seguir destaca um elemento alterando sua cor de fundo para yellow:

function highlight(elem) {
    const bgColor = 'yellow';
    elem.style.backgroundColor = bgColor;
}Linguagem de código:  JavaScript  ( javascript )

Para executar um trecho de código após destacar o elemento, você pode criar um callback :

function highlight(elem, callback) {
    const bgColor = 'yellow';
    elem.style.backgroundColor = bgColor;

    if(callback && typeof callback === 'function') {
        callback(elem);
    }
}
Linguagem de código:  JavaScript  ( javascript )

O seguinte chama a highlight()função e adiciona uma borda a um <div>elemento:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Custom Event Demo</title>
</head>
<body>
    <div class="note">JS Custom Event Demo</div>
    <script>
        function highlight(elem, callback) {
            const bgColor = 'yellow';
            elem.style.backgroundColor = bgColor;

            if (callback && typeof callback === 'function') {
                callback(elem);
            }
        }

        let note = document.querySelector('.note');
        function addBorder(elem) {
            elem.style.border = "solid 1px red";
        }

        highlight(note, addBorder);
    </script>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

Para tornar o código mais flexível, você pode usar o evento personalizado.

Criando eventos personalizados JavaScript

Para criar um evento personalizado, você usa o CustomEvent()construtor:

let event = new CustomEvent(eventType, options);Linguagem de código:  JavaScript  ( javascript )

O CustomEvent()tem dois parâmetros:

The eventTypeé uma string que representa o nome do evento.
O optionsé um objeto que possui a detailpropriedade que contém qualquer informação personalizada sobre o evento.

O exemplo a seguir mostra como criar um novo evento personalizado chamado highlight:

let event = new CustomEvent('highlight', {
    detail: {backgroundColor: 'yellow'}
});
Linguagem de código:  JavaScript  ( javascript )

Enviando eventos personalizados JavaScript

Depois de criar um evento personalizado, você precisa anexar o evento a um elemento DOM e acioná-lo usando o dispatchEvent()método:

domElement.dispatchEvent(event);Linguagem de código:  JavaScript  ( javascript )

Exemplo de evento personalizado JavaScript

Junte tudo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Custom Event</title>
</head>
<body>
    <div class="note">JS Custom Event</div>
    <script>
        function highlight(elem) {
            const bgColor = 'yellow';
            elem.style.backgroundColor = bgColor;

            // create the event
            let event = new CustomEvent('highlight', {
                detail: {
                    backgroundColor: bgColor
                }
            });
            // dispatch the event
            elem.dispatchEvent(event);
        }

        // Select the div element
        let div = document.querySelector('.note');

        // Add border style
        function addBorder(elem) {
            elem.style.border = "solid 1px red";
        }

        // Listen to the highlight event
        div.addEventListener('highlight', function (e) {
            addBorder(this);

            // examine the background
            console.log(e.detail);
        });

        // highlight div element
        highlight(div);
    </script>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

Como funciona:

Primeiro, declare a highlight()função que destaca um elemento e aciona o highlightevento.
Segundo, selecione o <div>elemento usando o querySelector()método.
Terceiro, ouça o highlightevento. Dentro do ouvinte de evento, chame a addBorder()função e mostre a detailpropriedade no Console.
Por fim, chame a highlight()função que irá disparar o highlightevento.

Por que usar eventos personalizados

Os eventos personalizados permitem dissociar o código que você deseja executar após a conclusão de outro trecho de código. Por exemplo, você pode separar os ouvintes de eventos em um script separado. Além disso, você pode ter vários ouvintes de eventos no mesmo evento personalizado.