Come aggiungere i listener di eventi agli oggetti in un file SVG?

Question

Vorrei creare una pagina web che visualizza uno svg interattivo: poiché possono essere usati diversi svg, i vari oggetti visualizzati avranno ID diversi, quindi i listener di eventi (per catturare un clic del mouse, per esempio) devono essere dinamici.

A partire da 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); 

Vorrei trovare un modo per scorrere tutti gli oggetti del svg (forse avere una classe particolare) e collegare un ascoltatore anche a loro.

aggiornamento

Cosi 'ogni' funzione di JQuery può essere un'opzione adatta, ma sembra che JQuery non gestisce la svg DOM così bene. C'è qualche altra opzione disponibile? (Come un plugin per jQuery?)

Answer 1

Questa è la mia struttura preferita per l'aggiunta di listener di eventi in SVG elementi con js vaniglia ...

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

Il codice di esempio si presenti è un po 'forzato, ma qui è una riscrittura che lo fa funzionare ...

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