La documentación
Si revisas la documentación de addEventListener
verás que dice lo siguiente:
addEventListener()
Registra un evento a un objeto en específico. El
Objeto específico puede ser un simple elemento en un archivo, el
mismo documento , una ventana o un XMLHttpRequest.
Verás también que la sintaxis es así:
target.addEventListener(tipo, listener[, useCapture]);
Aquí, target
puede ser sustituido sin ningún problema por cualquier id
de un elemento válido en el DOM.
Lo que ocurre en tu código
De lo leído en la doc, podemos concluir que al agregar un listener de esta forma: elId.addEventListener
, JS buscará en el DOM el elemento cuyo id sea igual a elId
. Si lo encuentra bien, y si no lo encuentra dará error.
Por eso en tu código:
- Esto funciona:
get.addEventListener
porque en el DOM hay un elemento con un id igual a get
- Esto no funciona:
h6.addEventListener
porque no hay en el DOM ningún elemento con un id igual a h6
.
- He agregado al DOM un elemento con
id="h6"
. Verás que tu anterior código erróneo, ya no lo es, porque se agrega un listener a ese elemento.
He hecho cosas a propósito en el código para que te des cuenta de lo que ocurre en realidad.
(function(e) {
var us = {
get: document.getElementById("gets"),
h6: document.getElementById("h6text")
};
gets.addEventListener("click", function() {
console.log("No error... Valor del elemento: " + us.get.value)
});
h6text.addEventListener("click", function() { // error ?
console.log("No error... Id del elemento: " + us.h6.id)
});
h6.addEventListener("click", function() { // error ?
console.log("ESTE ES EL LISTENER H6, SU ID ES: " + this.id)
});
})();
<input value="Obtener" type="button" id="gets">
<h6 id="h6text"><a href="#">Bienvenidos</a></h6>
<h6 id="h6"><a href="#">Esto sí que es H6</a></h6>
¿Palabras reservadas?
En cuanto a la duda sobre palabras reservadas, tuve la misma duda, plantee la pregunta hace un tiempo: ¿Palabras reservadas en HTML? y la respuesta aceptada es muy clara.