Caso 1
Si hacemos un console.log de this
en el contexto de una función regular en JS obtendremos esto:
[object HTMLDivElement] {
accessKey: "",
addEventListener: function addEventListener() { [native code] },
Dado lo cual será valido que accedas al texto de cada div
con la instrucción:
this.innerHTML
Caso 2
Sin embargo cuando hacemos un console.log de this
en el contexto de una arrow function la salida sería como esta:
[object Window] {
addEventListener: function addEventListener() { [native code] },
Donde notamos que entre las 2 existe diferencia del contexto de ejecución, por eso cuando intentas acceder a la propiedad innerHTML
te da undefined ya que son contextos distintos.
Propongo
- que para evitar el ciclo for, envuelvas los 3 div en uno superior o padre
- Vigiles el evento en la etiqueta padre y a partir de ahi determines quien de los elementos internos lo desencadeno leyendolo a través de su clase que sería
div
<html>
<head>
<title>this.innerHTML</title>
</head>
<body>
<div class="contenedor">
<div class="div">Hola mundo</div>
<div class="div">Todos</div>
<div class="div">Devolvera undefined</div>
</div>
<script>
let divs = document.querySelector(".contenedor")
divs.addEventListener("click", (evento) => {
if (evento.target.classList.contains("div")) {
alert(evento.target.innerText)
}
})
</script>
</body>
</html>
EDICIÓN
Usando el método getAttribute()
El método getAttribute()
se puede aplicar en este contexto para extrer atributos como:
A través de la siguiente sintaxis:
evento.target.getAttribute("atributo-deseado")
Usando la sintaxis de evento.target.atributo
Sin embargo en este punto el acceso a los atributos de cada nodo se hace mas simple a través de la sintaxis de:
evento.target.atributo
Y los nombres de los atributos serían:
De hecho con esta última si imprimes así:
console.log(evento.target)
Podrás ver entre una gran cantidad de resultados, aquellos atributos que buscamos:
.............
id: "uno"
.............
className: "div"
.............
.............
.............
.............