javascript - 将事件监听器添加到附加在 d3 中的

Question

我正在尝试将事件(addeventlistner)添加到附加有 d3 的多个元素。但是，当我单击 时，它不会触发附加的“警报”。有趣的是，这适用于 <div>我手动添加到里面。有人能解释一下吗？

d3.csv("output1.csv",function(data){    
var width = 700,
    height = 600;   
d3.select('body').selectAll("div")
    .data(data)
    .enter()
    .append("div")
    .style("width",30)
    .style('height',30)
    .style("background-color",function(d){
        return d.color;
}) 
var divs = document.getElementsByTagName("div") // this returns array of div elements    
function show(){
        alert("ya")
    }   
for (var i = 0; i < divs.length; i++) {
            divs[i].addEventListener('click',function(){
        alert("yaho")
    })
  } 
})

Answer 1

由于您使用的是 d3，因此请使用 d3 事件监听器，如下所示。

var divs = d3.select('body').selectAll("div")
        .data(data)
        .enter()
        .append("div")
        .style("width",30)
        .style('height',30)
        .style("background-color",function(d){
            return d.color;
        });

divs.on("click",function(){
          alert("yaho")             
      });

或者

function show(){
   alert("Hi");
}

divs.on("click",show);

与 addEventListeners 绑定(bind)的监听器也可以工作。这是使用类似代码的工作 fiddle 。 JSFiddle