如何將事件偵聽器添加到svg中的對象？

Question

我想創建一個顯示交互式svg的網頁：因爲可以使用幾個svg，所顯示的各種對象將具有不同的ID，所以事件監聽器（例如捕捉鼠標點擊）必須是動態的。

從this snippet

var a = document.getElementById("alphasvg"); 
a.addEventListener("load",function(){ 
     var svgDoc = a.contentDocument; 
     var delta = svgDoc.getElementById("delta"); 
     delta.addEventListener("click",function(){alert('hello world!')},false); 
    },false); 

開始，我想通過SVG（也許具有特定類）的所有對象，以找到一種方法，週期和附加一個甚至聽衆給他們。

更新

所以JQuery的「每個」功能可能是一個合適的選擇，但似乎jQuery不會處理SVG DOM這麼好。有沒有其他可用的選項？ （如jQuery插件？）

Answer 1

這是我添加事件偵聽器爲SVG香草JS元素優選結構...

// select elements 
var elements = Array.from(document.querySelectorAll('svg .selector')); 

// add event listeners 
elements.forEach(function(el) { 
    el.addEventListener("touchstart", start); 
    el.addEventListener("mousedown", start); 
    el.addEventListener("touchmove", move); 
    el.addEventListener("mousemove", move); 
}) 

// event listener functions 

function start(e){ 
    console.log(e); 
    // just an example 
} 

function move(e){ 
    console.log(e); 
    // just an example 
} 

你目前的代碼示例是有點做作，但這裏有一個重寫使其工作...

var a = document.getElementById("alphasvg"); 
a.addEventListener("load",function(){ 
    var svgDoc = a.contentDocument; 
    var els = svgDoc.querySelectorAll(".myclass"); 
    for (var i = 0, length = els.length; i < length; i++) { 
    els[i].addEventListener("click", 
     function(){ console.log("clicked"); 
    }, false); 
    } 
},false);