Cómo agregar detectores de eventos a los objetos en un svg?

Question

Me gustaría crear una página web que muestre un svg interactivo: dado que se pueden usar varios svg, los diversos objetos mostrados tendrán ID diferentes, por lo que los detectores de eventos (para capturar un clic de ratón, por ejemplo) tienen que ser dinámicos.

A partir de 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); 

me gustaría encontrar una manera de desplazarse a través de todos los objetos de la SVG (tal vez tener una clase particular) y adjuntar un oyente incluso para ellos.

actualización

Así que 'cada uno' función de jQuery puede ser una opción adecuada, pero parece que jQuery no maneja el DOM SVG tan bien. ¿Hay alguna otra opción disponible? (Como un plugin de jQuery?)

Answer 1

Ésta es mi estructura preferida para añadir detectores de eventos a SVG elementos con js vainilla ...

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

El código de ejemplo que presentamos es un tanto artificial, pero aquí es una reescritura que lo hace funcionar ...

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