Как добавить прослушиватели событий к объектам в svg?

Я хотел бы создать веб-страницу с отображением интерактивного svg: поскольку может использоваться несколько svg, различные отображаемые объекты будут иметь разные идентификаторы, поэтому прослушиватели событий (например, чтобы поймать щелчок мыши) должны быть динамическими.

Начиная с этого фрагмента

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

Ответы

Ответ 1

Это моя предпочтительная структура для добавления прослушивателей событий к элементам SVG с помощью vanilla 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);