Jak dodać detektory zdarzeń do obiektów w svg?

Question

Chciałbym stworzyć stronę internetową wyświetlającą interaktywny svg: ponieważ może być użytych kilka svg, różne wyświetlane obiekty będą miały różne identyfikatory, więc detektory zdarzeń (na przykład, aby złapać kliknięcie myszą) muszą być dynamiczne.

Począwszy od 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); 

Chciałbym znaleźć drogę do cyklu przez wszystkich obiektów SVG (może mającego szczególną klasę) i dołączyć do nich nawet słuchacza.

aktualizacja

Więc JQuery „każdy” funkcja może być odpowiednim rozwiązaniem, ale wydaje się, że JQuery nie obsługuje DOM svg tak dobrze. Czy jest jakaś inna dostępna opcja? (Jak plugin jQuery?)

Answer 1

To mój korzystną strukturę do dodawania detektorów zdarzeń do SVG elementy z JS wanilii ...

// 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 
} 

Przykładowy kod przedstawić nieco wymyślony, ale tutaj jest to, że przepisać sprawia, że ​​działa ...

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);