Как прикрепить событие к кругу SVG, который вызывает функцию

Question

Я создаю несколько кругов во время выполнения (document.createElementNS('','circle')).Мне нужно прикрепить событие mouseover, которое вызывает функцию.

Я пробовал addEventListener, setAttribute, но он не работает:

  circle.setAttribute('onmouseover', this.showPopup);
  circle.addEventListener('onmouseover', this.showPopup);

Answer 1

addEventListener("mouseover" не onmouseover

например,

const svgNS = "http://www.w3.org/2000/svg";

const svg = document.querySelector("svg");
const c = document.createElementNS(svgNS ,'circle');
c.setAttribute('cx', 50);
c.setAttribute('cy', 50);
c.setAttribute('r', 50);

svg.appendChild(c);

c.addEventListener("mouseover", function () {
  console.log("mouseover");
});

<svg viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg">
</svg>