I want you to click on any link [element 'a'], something happens.
I have tried the code below, with getElementsByTagName but I did not succeed.
document.getElementsByTagName("a").onclick = function() {
document.getElementById("loader").style.display = "block";
}
When you select multiple elements, you are returned an array with all the elements that match the search.
In this case, document.getElementsByTagName('a') will return a array with all elements found, even if it is only one.
To put an event listener on each of the elements found, you need to go through this array.
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);
}
}
EDIT
Another way to do this is to use 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 particular event is triggered.
Advantages
The advantage of this pattern is that you do not have to go through all the found elements and add a callback function in each their. In this pattern, you add the callback only on the element parent, and then when you click on a child element, the event will be fired in the child element and only then in the parent element.
This way, you can add new elements dynamically and do not need to add a callback directly to them. You just need to tell what action it should take
How is this possible? The default way most browsers use to propagate events is capture . In event delegation, the default is bubbling. Basically, capture propagates the event from the parent element to the child element (top to bottom). The bubbling, propagates from the child element to the parent element (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>