3

Quero que, ao clicar em qualquer link [elemento 'a'], algo aconteça.

Já tentei o código abaixo, com getElementsByTagName mas não obtive sucesso.

document.getElementsByTagName("a").onclick = function() {
    document.getElementById("loader").style.display = "block";
}

1 Resposta 1

7

Quando você seleciona vários elementos, é lhe retornado um objeto array-like com todos os elementos que correspondem à busca.

No caso, document.getElementsByTagName('a') vai retornar um HTMLCollection vivo com todos os elementos a encontrados, mesmo que seja um só.

Para você colocar um event listener em cada um dos elementos encontrados, você precisa percorrer por cada elemento dessa lista.

Desta forma:

// Seleciona todos os elementos de determinada tag
var elementos_a = document.getElementsByTagName('a');

// Percorre os elementos. 
for (var i = 0; i < elementos_a.length; i++) {
    /* Adiciona o evento em cada um dos elementos por meio do seu índice no array */        
    elementos_a[i].onclick = function() {
        alert('Olá, eu sou o elemento número ' + i);
    }
}

Outra forma de fazer isso é usando event delegation. Nesse padrão, você cria um lista de ações disponíveis e diz a cada elemento qual dessas ações ele deve executar quando determinado evento for disparado.

Vantagens da delegação de eventos

  • A vantagem desse padrão é que você não precisa percorrer todos os elementos encontrados e adicionar uma função callback em cada um deles. Neste padrão, você adiciona o callback apenas no elemento pai, e então, quando você clicar em um elemento filho, o evento será disparado no elemento filho e, só depois, no elemento pai.

  • Dessa forma, você pode adicionar novos elementos dinamicamente e não precisa adicionar um callback diretamente neles. Você só precisa dizer que ação ele deve executar

Como isso é possível? O jeito padrão (default) que a maioria dos browsers usa para propagar eventos é o capture. No event delegation, o padrão utilizado é o bubbling. Basicamente, o capture propaga o evento do elemento pai até o elemento filho (de cima pra baixo). Já o bubbling propaga do elemento filho até o elemento pai (de baixo pra cima). Saiba mais aqui

Exemplo:

var todosItems = document.querySelector('#items');
var relatorio = document.querySelector('#relatorio');


// As ações disponíveis
var acoes = {
  /**
  Mostra o conteúdo do elemento
  no relatorio  
  **/
  mostrarItem: function(elemento) {
    // Este código não importa
    var texto = elemento.textContent;
    relatorio.textContent = texto;
  },
  
  /**
  Edita o conteúdo do elemento
  **/
  editarConteudo: function(elemento) {
    // Este código não importa
    elemento.contentEditable = "true";
    elemento.focus();
    elemento.onblur = function() {
      elemento.contentEditable = "false";
    }
  },

  // Colore o elemento por meio segundo
  colorir: function(elemento) {
    // Este código não importa
    elemento.style.color = "red";        
    setTimeout(function() {elemento.style.color = 'black'}, 500);
  }

}


/**
Adiciona o evento click apenas no elemento
que é pai dos items (ul#items)
**/
todosItems.addEventListener('click', function(evento) {
  /**
  Quando algum elemento for clicado dentro do
  elemento pai, "evento.target" representará
  esse mesmo elemento (clicado)
  **/
  var itemClicado = evento.target;
  
  /**
  Nome da ação que o elemento deve executar
  é extraído da propriedade data-acao=""
  **/
  var nomeDaAcao = itemClicado.dataset.acao;
  
  /**
  Pega a função que corresponde à ação desejada
  na nossa lista de açṍes (variável acoes)
  Verifica também se a ação requerida existe
  na lista de ações usando uma condição ternária
  **/
  var executar = acoes[nomeDaAcao] ? acoes[nomeDaAcao] : null;
  
  /**
  Se a ação existir, executa ela passando o 
  elemento clicado como argumento
  **/
  if (executar != null) {
    executar(itemClicado)
  }
  
/**
False significa que o evento deve ser do tipo
bubble, e não do tipo capture.
Veja mais sobre bubble e capture no link que deixei.
Eles são a base do event delegation
**/
}, false)
<ul id="items">
  <!-- Estes dois têm suas têm suas informações
  exibidas quando você clica neles -->
  <li data-acao="mostrarItem" >Smartphone</li>
  <li data-acao="mostrarItem" >Refrigerador</li>
  
  <!-- Estes dois você pode editar ao clicar -->
  <li data-acao="editarConteudo" >Notebook</li>
  <li data-acao="editarConteudo" >Liquidificador</li>

  <!-- Estes dois vão mudar de cor ao clicar -->
  <li data-acao="colorir" >Geladeira</li>
  <li data-acao="colorir" >Fogão</li>
<ul>

<p id="relatorio"> <p>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .