Execute function by clicking on any element of type

Question

I want something to happen by clicking on any link [element 'a'].

I have tried the code below, with getElementsByTagName but I was unsuccessful.

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

Answer 1

When you select multiple elements, you are returned an object array-like with all the elements that correspond to the search.

In the case, document.getElementsByTagName('a') will return a HTMLCollection alive with all the elements to be found, even if it is one.

For you to put a Event Listener in each of the elements found, you need to scroll through each element of that list.

In this way:

// 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);
    }
}

---

Another way to do this is by using Event delegation. In this pattern, you create a list of available actions and tell each element which of these actions it should perform when a given event is triggered.

Advantages of event delegation

• The advantage of this pattern is that you don’t need to go through all the found elements and add a function callback in each from them. In this pattern, you add the callback only in the element father, and then when you click on a child element, the event will be shot at the child element and then only at the parent element.

• This way, you can add new elements dynamically and don’t need to add a callback directly on them. You just need to say what action he should perform

How is this possible? The standard way (default) that most browsers use to propagate events is the capture. In the Event delegation, the standard used is Bubbling. Basically, capture propagates the event from the parent element to the child element (top to bottom). Already the Bubbling propagation from the child element to the parent element (from bottom to top). Learn more here

Example:

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>