Javascript 以编程方式将事件处理程序分配给svg元素

我已经开始使用svg进行可视化。这是一个简单的柱状图，目前为止运行良好。我正在从外部XML文件加载数据，并显示一个柱状图。 现在我想添加一个悬停效果，当悬停一列时，它会改变条的颜色。 因此，问题是如何将eventhandler添加到先前生成的svg元素中。 我尝试了不同的方法： （1） 生成尝试添加eventhandler的元素时：

newElement.onmouseclick="highlightOn(this)"; 

（2） 添加事件处理程序——这应该是更高级的方式——我不知道如何选择在SVG中触发事件的正确元素

newElement.addEventListener("mouseover", highlightOn, false)

（3） 一些论坛将此作为一种可能性（也不起作用：contentDocument返回null）

svg.addEventListener（“单击”，函数（）{
log（“svg悬停”）；
var svgDoc=theSVG.contentDocument；//获取alpha.svg的内部DOM
console.log（svgDoc）；
var allColums=svgDoc.getElementsByTagName（“rect”）；
对于（变量i=0；i

总而言之，我很困惑，不知道如何继续。 下面是我如何生成svg的：

for (var i = 0; i < allLogs.length; i++) {
    //reading data
    date        =allLogs[i].getElementsByTagName("date")[0].firstChild.data;
    console.log("date "+date);
    time5000m   =allLogs[i].getElementsByTagName("TimeFivethousandMeter")[0].firstChild.data;
    if (time5000m==" ") {time5000m=0;};
    console.log("time 5000m"+time5000m);
    //adding data to SVG
    //>> colum
    var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'rect'); //Create a rect in SVG's namespace
    newElement.setAttribute("width",width); 
    newElement.setAttribute("height",time5000m*scaleFactor); 
    var xPos=width*i+i*offset+sideMargins/2;
    newElement.setAttribute("x",xPos); 
    var yPos=height-time5000m*scaleFactor-verticalMargin/2;
    newElement.setAttribute("y", yPos);
    newElement.style.fill = "#cf004e"; //Set fill colour
    newElement.style.opacity="0.75";
    theSVG.appendChild(newElement);
};

for（var i=0；i>柱
var newElement=document.createElements（“http://www.w3.org/2000/svg“，'rect'）；//在SVG的命名空间中创建一个rect
setAttribute（“宽度”，宽度）；
setAttribute（“高度”，time5000m*scaleFactor）；
var xPos=宽度*i+i*偏移量+边距/2；
setAttribute（“x”，xPos）；
var yPos=高度-时间5000m*垂直刻度线/2；
setAttribute（“y”，yPos）；
newElement.style.fill=“#cf004e”//设置填充颜色
newElement.style.opacity=“0.75”；
sesvg.appendChild（新元素）；
};

---

如何处理这个问题？

这里有一些奇怪的事情。首先，为什么在（3）中，您试图在单击处理程序中添加单击处理程序？可能是SVG单击处理程序正在拦截每次单击，而您所做的只是替换rect单击处理程序

---

为什么不在创建每个

时添加单击处理程序呢？在追加新元素时将处理程序添加到新元素。

查看您的第一次尝试：

newElement.onmouseclick="highlightOn(this)";

您有一个错误：

onmouseclick

应该是

onclick

我在鼠标事件中使用

this

时遇到问题，因此我使用的最佳方法是为相关元素设置ID，然后使用辅助函数分配给onlick，因此在元素创建循环中添加类似的内容：

var id = 'el'+i;
newElement.id = id;
newElement.onclick = funcHighlightOn(id);

然后，使用这样的函数分配onclick操作：

function funcHighlightOn(id) {
   return function() {
      highlightOn(id);
   }
}

---

上述奇怪的原因是，当以这种方式分配参数时，很难将参数（在本例中为元素的ID）传递到鼠标事件中。

重新编写代码片段#2：在函数highlightOn中，

this

关键字指代（a）事件附加到的元素和（b）警察开了枪event@enzflep：这就是我所想的，所以我有一个函数类似于highlightOn（obj）{obj.style.fill=“#543”；}但它不起作用不，它不会。传递给函数的变量是事件，而不是触发它的对象。正如我所说，使用

this

关键字。例如

函数highlightOn（e）{this.style.fill='#543；'}

我解释了OP列出了他尝试过的不同解决方案-不是一次全部。谢谢！那一个有效。只需添加一行，使用ID选择元素

function funcHighlightOn(id) {
   return function() {
      highlightOn(id);
   }
}