javascript - assigning event handlers to svg elements programmtically -

i've started visualization using svg. it's simple column chart thing , working fine far. i'm loading data external xml file , display column chart. want add hover-effect, change color of bar when hovering column. question how add eventhandler generated svg element. tried different ways: (1) when generating element trying add eventhandler already:

newelement.onmouseclick="highlighton(this)";  

(2) adding event handler supposedly more advanced way don't know how select right element fired event inside svg.

newelement.addeventlistener("mouseover", highlighton, false) 

(3) forum showed possibility (doesn't work either: contentdocument returns null)

thesvg.addeventlistener("click", function(){     console.log("svg hovered");     var svgdoc = thesvg.contentdocument; //get inner dom of alpha.svg     console.log(svgdoc);     var allcolums= svgdoc.getelementsbytagname("rect");     (var = 0; < allcolums.length; i++) {         allcolums[i].addeventlistener("click", function(){             console.log("clicked!"); })     };  }); 

so in all, i'm quite confused , have no idea how proceed. here how i'm generating svg:

for (var = 0; < 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 svg     //>> colum     var newelement = document.createelementns("http://www.w3.org/2000/svg", 'rect'); //create 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); }; 

does have idea how deal this? hope so!

looking @ first attempt:

newelement.onmouseclick="highlighton(this)"; 

you have 1 mistake: onmouseclick should onclick

i've had trouble using this in mouse events, best method i've used set id element in question, use helper function assign onlick, add element creation loop:

var id = 'el'+i; newelement.id = id; newelement.onclick = funchighlighton(id); 

then, use function can use assign onclick action:

function funchighlighton(id) {    return function() {       highlighton(id);    } } 

the reason weirdness of above it's difficult pass parameters (in case, element's id) mouse events when assigned way.