Imagem relacionada

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

laughing 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.

laughing 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".

laughing 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().

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

Compartilhe:

Área do Usuário

Doações

Por favor, ajude o nosso site a se manter online :)

 Obrigado!
Angelo Luis Ferreira
angelo.alf@gmail.com

Produzido por:

Topo