addEventListener给儿童js -纯js

Question

我想使用纯Javascript将addEventListener设置为父元素的子元素，即通过单击子元素(点之一并更改img源)来更改图像src。但只能使用儿童索引。

    <div class="carousel-slide">
    <img src="img/1.jpg" id="img1" alt="" />    
    </div>
    <div class="dots" id="dots">
        <span class="dot" id="dot1"></span>
        <span class="dot" id="dot2"></span>
        <span class="dot" id="dot3"></span>
        <span class="dot" id="dot4"></span>
        <span class="dot" id="dot5"></span>
        <span class="dot" id="dot6"></span>
    </div>

我知道一些改变src的方法，但是我不知道最短和更好的Javascript代码。

是否可以将addEventListener设置为所有的子级并使用它们？

Answer 1

在将eventListener添加到父目录后，可以获取索引。

var dots = document.querySelector(".dots");

dots.addEventListener("click",function(e){
  var index = Array.prototype.indexOf.call(dots.children, e.target);
  console.log(index)
});

Answer 2

出于性能考虑，通常最好在根组件上创建一个事件侦听器(比如带有id=“点”的div。然后，在事件侦听器函数中，可以使用e.target获取在该容器中单击的实际元素的属性。一个事件的听者可以覆盖你所有的点。下面是一个如何实现这一目标的例子。

<div class="carousel-slide">
    <img src="img/1.jpg" id="img1" alt="" />    
</div>

<div class="dots" id="dots">
    <span data-src="http://" class="dot" id="dot1"></span>
    <span data-src="http://" class="dot" id="dot2"></span>
    <span data-src="http://" class="dot" id="dot3"></span>
    <span data-src="http://" class="dot" id="dot4"></span>
    <span data-src="http://" class="dot" id="dot5"></span>
    <span data-src="http://" class="dot" id="dot6"></span>
</div>

var dotsContainer = document.getElementById('dots');
var imageContainer = document.getElementById('img1');

dotsContainer.addEventListener('click', function (e) {
    imageContainer.src = e.target.dataset.src;
});

使用数据属性

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

事件目标(e.target)

https://developer.mozilla.org/en-US/docs/Web/API/Event/target

e.target引用单击的元素

这与e.currentTarget不同，后者在此上下文中引用父服务器。

Answer 3

下面是另一种方法，您使用父元素并向其添加事件侦听器，然后可以使用e.target访问子元素。

​

var dots=document.getElementById("dots")
var img = document.querySelector("#img1");

dots.addEventListener("click",(e)=>{
   if(e.target==e.currentTarget) return
   dot= e.target
   img.src = dot.getAttribute("set-src");
   console.log(img)
})

<div class="carousel-slide">
    <img src="img/1.jpg" id="img1" alt="" />    
    </div>
    <div class="dots" id="dots">
        <span set-src="http://1" id="dot1">1</span>
        <span set-src="http://2" id="dot2">2</span>
        <span set-src="http://3" id="dot3">3</span>
        <span set-src="http://9" id="dot4">4</span>
        <span set-src="http://4" id="dot5">5</span>
        <span set-src="http://5" id="dot6">6</span>
    </div>

​