Como criar múltiplos eventos em um único elemento HTML - JavaScript

Por: Angelo Luis Ferreira | 16/10/2019 Acessos: 6.233

Neste tutorial vamos mostrar três formas para criar múltiplos eventos em um único elemento HTM especificado. Na primeira forma vamos utilizar eventos nativos do JavaScript, na segunda forma vamos utilizar o método document.addEventListener() e finalmente na terceira forma vamos utilizar eventos anexados diretamente aos objetos JavaScript.

Obs.: addEventListener() é um método JavaScript que anexa um manipulador de eventos ao elemento especificado.

1ª forma - Criando múltiplos eventos com eventos JavaScript

1. Vamos mostrar inicialmente um exemplo de múltiplos eventos em um elemento HTML com a utilização eventos junto com o elemento HTML.

2. No exemplo a seguir, o elemento div se altera ao clicar sobre o elemento ou entrar e sair com o cursor do mouse sobre o elemento. Veja o código abaixo:

HTML

<h1>Usando múltiplos eventos</h1>

<div id='area' onclick="clicar()" onmouseenter="entrar()" onmouseout="sair()">
        Interaja...
</div>

Obs: Utilizamos os manipuladores de eventos: onclick, onmouseenter e onmouseout. Desta forma, podemos configurar uma ação de múltiplos eventos em um único elemento HTML.

CSS

#area {
  font: normal 22pt Arial;
  bacKground: #048804;
  color: white;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}

JavaScript

var area = document.getElementById('area');

function clicar() {
  area.innerHTML = "OK - Clicou";
  area.style.backgroundColor = "red";
}

function entrar() {
  area.innerText = "Entrou!";
}

function sair() {           
  area.innerText = `Saiu!!!`;
  area.style.backgroundColor = '#048804';
}

Obs.: Utilizamos aqui 3 funções distintas, sendo uma para cada evento. O eventos foram definidos no código HTML através dos eventos onclick, onmouseenter e onmouseout

Para verificar os códigos acima, teste o nosso exemplo abaixo. Clique o passe o mouse sobre o elemento para visualizar os três eventos.

  See the Pen
  MWWJoJR by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

2ª forma - Criando múltiplos eventos utilizando o método addEventListener()

1. Neste exemplo, vamos repetir as ações do exemplo anterior mas utilizando no código JavaScript o método addEventListener().

HTML

<div id='area'>
        Interaja...
</div>

CSS

#area {
  font: normal 22pt Arial;
  bacKground: #048804;
  color: white;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}

JavaScript

var area = document.getElementById('area');

area.addEventListener('click', clicar);
area.addEventListener('mouseenter', entrar);
area.addEventListener('mouseout', sair);

function clicar() {
  area.innerHTML = "OK - Clicou";
  area.style.backgroundColor = "red";
}

function entrar() {
  area.innerText = "Entrou!";
}

function sair() {           
  area.innerText = `Saiu!!!`;
  area.style.backgroundColor = '#048804';
}

Obs.1: Utilizamos também aqui 3 funções distintas, uma para cada evento. Entretanto, os eventos foram definidos diretamente no JavaScript através da função addEventListener().

Obs.2: Quando usamos a função addEventListener(), definimos como primeiro parâmetro o evento e no segundo parâmetro a função que deve ser acionada.

Obs.3: Observe que os eventos definidos na função addEventListener() não são precedidos do prefixo "on". Portanto onclick passa a ser apenas click.

Para verificar os códigos acima, teste o nosso exemplo abaixo. Clique o passe o mouse sobre o elemento para visualizar os três eventos.

  See the Pen
  Multíplos eventos 2 by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

3ª forma - Criando múltiplos eventos anexando os eventos diretamente ao objeto JavaScript

1. Neste exemplo, vamos repetir as ações do exemplo anterior mas anexando diretamente os eventos ao objeto JavaScript

HTML

<div id='area'>
        Interaja...
</div>

CSS

#area {
  font: normal 22pt Arial;
  bacKground: #048804;
  color: white;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}

JavaScript

var area = document.getElementById('area');

area.onclick = function() {clicar()};
area.onmouseenter = function() {entrar()};
area.onmouseout = function() {sair()};

function clicar() {
  area.innerHTML = "OK - Clicou";
  area.style.backgroundColor = "red";
}

function entrar() {
  area.innerText = "Entrou!";
}

function sair() {           
  area.innerText = `Saiu!!!`;
  area.style.backgroundColor = '#048804';
}

Obs.1: Utilizamos também aqui 3 funções distintas, uma para cada evento. Entretanto, os eventos foram definidos anexando-os diretamente ao o objeto, que no caso utilizamos  document.getElementById().

Obs.2: Ao anexarmos o evento ao objeto recebemos a função específica através de uma função anônima (function ()).

Obs.3: Observe que os eventos utilizam o prefixo "on".

Para verificar os códigos acima, teste o nosso exemplo abaixo. Clique o passe o mouse sobre o elemento para visualizar os três eventos.

  See the Pen
  Eventos Múltiplos 3 by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

Documentação Oficial

1. [element.addEventListener() - definições básicas] » Sobre sintaxe e utilização da função add.EventListener().