¿Cómo agregar un event listener para varios elementos?

publicado por: Anonymous

Quiero añadir el evento listener a una lista de imágenes, cuando el mouse se encuentre sobre una imagen se extraiga el atributo alt de la imagen y lo coloque en un , obtuve la lista de todas las imágenes que necesito con:

var img = document.querySelectorAll('.contenedorIMG')

Pero puesto que esto me devuelve una lista a la que puedo acceder a sus elementos sólo colocando el indice (img[i]), quiero añadir un event listener para cualquiera de sus elementos, sin embargo no se como hacerlo. Pueden darme una mano? Lo que tengo de código es lo siguiente:

window.onload = function () {
    var img = document.querySelectorAll('.contenedorIMG'),
        titular = document.querySelector('#titular');


    img[0].addEventListener('mouseover', function () {     
        titular.innerText = 'CSS Master';
        console.log('Click');
    })
}

Obviamente está mal, pero es más o menos la idea que tengo por los momentos.

solución

Codigo

_x000D_

_x000D_

window.onload = function() {_x000D_
_x000D_
  var imagenes = document.querySelectorAll('.contenedorIMG');_x000D_
  var titular = document.querySelector('#titular');_x000D_
_x000D_
  for (var i = 0; i < imagenes.length; i++) {_x000D_
_x000D_
    imagenes[i].addEventListener('mouseover', function() {_x000D_
      titular.innerText = this.alt;_x000D_
    });_x000D_
_x000D_
  }_x000D_
}

_x000D_

<h2 id="titular"></h2>_x000D_
<img height="42" width="42" class="contenedorIMG" alt="Imagen 1" src="https://ugc.kn3.net/i/origin/http://3.bp.blogspot.com/-HiWHxDwh6TE/TrlrCVirYbI/AAAAAAAAAdU/-8d44aYfaVo/s1600/Mangekyou+Sharingan.png"></img>_x000D_
<img height="42" width="42" class="contenedorIMG" alt="Imagen 2" src="https://images.vexels.com/media/users/3/132335/isolated/lists/4af43ce1082231cba5e5aa60fbb03f2f-staffs-iconos-de-c-rculo.png"></img>_x000D_
<img height="42" width="42" class="contenedorIMG" alt="Imagen 3" src="https://students.faith.sa.edu.au/images/tiles/dropbox-icon.png"></img>

_x000D_

_x000D_

_x000D_


Explicacion

Lo primero que hemos hecho es dejar cambiar la asociacion de los eventos usando esta sentencia:

  for (var i = 0; i < imagenes.length; i++) {

    imagenes[i].addEventListener('mouseover', function() {
      titular.innerText = this.alt;
    });

  }

Lo que hacemos aqui es ir recorriendo cada uno de los elementos del arreglo imagenes y le iremos asociando el evento.

Posteriormente agregamos esta linea dentro de nuestra funcion a ejecutar:

titular.innerText = this.alt;

Con esta linea le indicamos al elemento <h2> el texto que tendra, cuando se cumpla el evento. Que para dicho caso sera agregar el atributo alt de la imagen a la que se esta asignando el evento.


Actualizacion

Agrego una actualizacion respectiva al codigo que acabamos de trabajar, podria ser util para un caso que quieras que se oculte automaticamente el texto del titular.

_x000D_

_x000D_

window.onload = function() {_x000D_
_x000D_
  var imagenes = document.querySelectorAll('.contenedorIMG');_x000D_
  var titular = document.querySelector('#titular');_x000D_
_x000D_
  for (var i = 0; i < imagenes.length; i++) {_x000D_
_x000D_
    imagenes[i].addEventListener('mouseover', function() {_x000D_
      titular.innerText = this.alt;_x000D_
    });_x000D_
_x000D_
    imagenes[i].addEventListener('mouseout', function() {_x000D_
      titular.innerText = "";_x000D_
    });_x000D_
_x000D_
  }_x000D_
}

_x000D_

#contenedor_titular {_x000D_
  width: 100px;_x000D_
  height: 60px;_x000D_
}

_x000D_

<div id="contenedor_titular">_x000D_
  <h2 id="titular"></h2>_x000D_
</div>_x000D_
<div>_x000D_
  <img height="42" width="42" class="contenedorIMG" alt="Imagen 1" src="https://ugc.kn3.net/i/origin/http://3.bp.blogspot.com/-HiWHxDwh6TE/TrlrCVirYbI/AAAAAAAAAdU/-8d44aYfaVo/s1600/Mangekyou+Sharingan.png"></img>_x000D_
  <img height="42" width="42" class="contenedorIMG" alt="Imagen 2" src="https://images.vexels.com/media/users/3/132335/isolated/lists/4af43ce1082231cba5e5aa60fbb03f2f-staffs-iconos-de-c-rculo.png"></img>_x000D_
  <img height="42" width="42" class="contenedorIMG" alt="Imagen 3" src="https://students.faith.sa.edu.au/images/tiles/dropbox-icon.png"></img>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *