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>