DOM получить изображение SR c по нажатию в любом месте в DIV

Question

Я могу получить источник изображения, когда нажимаю на изображение ...

document
    .querySelectorAll('.module img')
    .forEach(el => el.addEventListener("click", e => {
        console.log(e.target.currentSrc)
    });

<div class="module">
    <img src="pics/pic1.jpg">
    <h2>Title</h2>
    <p>Lorem impsum dolor sit amet</p>
</div>

<div class="module">
    <img src="pics/pic2.jpg">
    <h2>Title</h2>
    <p>Lorem impsum dolor sit amet</p>
</div>

<div class="module">
    <img src="pics/pic3.jpg">
    <h2>Title</h2>
    <p>Lorem impsum dolor sit amet</p>
</div>

... но как я могу получить источник изображения независимо от того, где я нажимаю в родительский div, без выполнения прослушивателей событий для каждого дочернего элемента?

Answer 1

Вы можете сделать что-то вроде этого. Добавьте listener ко всему div с помощью селектора классов.

document.querySelectorAll(".module").forEach(ele => {
  ele.addEventListener("click", function() {
    console.log(this.children[0].getAttribute('src'))
  })
})

<div class="module">
  <img src="pics/pic.jpg">
  <h2>Title</h2>
  <p class="usp">Lorem ipsum</p>
  <p>Lorem impsum dolor sit amet</p>
</div>

Answer 2

Каким бы ни было ваше решение, похоже, вам потребуется получить информацию либо от this, либо от event, переданного в прослушиватель событий:

document
    .querySelectorAll('.module')
    .forEach(el => {
        el.addEventListener("click", e => {
            console.log(e.currentTarget.querySelector('img').currentSrc);
        });
    });

<div class="module">
    <img src="pics/pic.jpg">
    <h2>Title</h2>
    <p class="usp">Lorem ipsum</p>
    <p>Lorem impsum dolor sit amet</p>
</div>

<div class="module">
    <img src="pics/pic2.jpg">
    <h2>Title</h2>
    <p class="usp">Lorem ipsum</p>
    <p>Lorem impsum dolor sit amet</p>
</div>

<div class="module">
    <img src="pics/pic3.jpg">
    <h2>Title</h2>
    <p class="usp">Lorem ipsum</p>
    <p>Lorem impsum dolor sit amet</p>
</div>

Answer 3

Добавьте прослушиватель событий к родителю, и не используйте event.stopPropagation ()

var el = document.querySelector(".module");
el.addEventListener("click", function(ev){
  // Parent div clicked, get the image element ref
  var img = document.querySelector(".module img");
  alert(img.currentSrc)
  // Image src alerted
})