Trigger An Event Listener

March 13, 2023

let paths = document.querySelectorAll('path');
// paths is an html collection of all paths;
// attach event listeners to each path;
for (let i=0; i<paths.length; i++) {
  paths[i].addEventListener('click', event => alert(event.target.dataset.key));
}

function Path_1(){}

function Path_2(){}

<button onclick="Path_1()">Path_1</button>
<button onclick="Path_2()">Path_2</button>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600 " id="svg1">
  <g enable-background="new">
       <path data-key="Number_1" transform="matrix(1,0,0,-1,0,600)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 324.34 555.57 L 324.34 596.6 "/>
       
    <path data-key="Number_2" transform="matrix(1,0,0,-1,0,600)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 224.34 585.57 L 224.34 586.6 L 225.22 588.68 L 226.1 589.71 L 227.87 590.75 L 231.39 590.75 L 233.15 589.71 L 234.04 588.68 L 234.92 586.6 L 234.92 584.53 L 234.04 582.46 L 232.27 579.35 L 223.46 568.98 L 235.8 568.98 "/>

  </g>
</svg>

Above is a working code which displays Number 1 and 2 that can be clicked using cursor and it will pop up an alert box to alert the Number 1 and 2. May I ask how do I trigger the event for each path using 2 different buttons, like Path 1 button is to trigger Path 1 and alert Number 1 pop up box will appear and this goes the same for Path 2. I will be grateful for any help I can get 🙂

>Solution :

You can dispatch a click event on the appropriate <path> element.

let paths = document.querySelectorAll('path');
for (let i = 0; i < paths.length; i++) {
  paths[i].addEventListener('click', event => alert(event.target.dataset.key));
}
function Path_1() {
  paths[0].dispatchEvent(new Event('click'));
}
function Path_2() {
  paths[1].dispatchEvent(new Event('click'));
}

<button onclick="Path_1()">Path_1</button>
<button onclick="Path_2()">Path_2</button>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600 " id="svg1">
  <g enable-background="new">
       <path data-key="Number_1" transform="matrix(1,0,0,-1,0,600)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 324.34 555.57 L 324.34 596.6 "/>
    <path data-key="Number_2" transform="matrix(1,0,0,-1,0,600)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#000000" d="M 224.34 585.57 L 224.34 586.6 L 225.22 588.68 L 226.1 589.71 L 227.87 590.75 L 231.39 590.75 L 233.15 589.71 L 234.04 588.68 L 234.92 586.6 L 234.92 584.53 L 234.04 582.46 L 232.27 579.35 L 223.46 568.98 L 235.8 568.98 "/>
  </g>
</svg>