this in an element's onclick attribute refers to the element itself
Setting an onclick attribute on a div containing an svg allows any click within the div to trigger the function. By passing this as an argument, it will always reference the specific div element.
After the function is triggered, it extracts the data attribute of the first path tag within the div.
An alternative approach would be to attach an eventListener directly to the path elements. This way, each event generates an event object with a target property pointing to the element that initiated the event. This target element should then have its data attribute extracted.
For more information, visit: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
The provided code snippet demonstrates how to attach event listeners to various paths in your SVG image.
let paths = document.querySelectorAll('path');
// paths represents all path elements;
// assign event listeners to each path element;
for (let i=0; i<paths.length; i++) {
paths[i].addEventListener('click', event => alert(event.target.dataset.key));
}
<div>
<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="12345" 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>
</div>
If you have numerous paths, duplicating the same handler function for each path may not be memory-efficient. It is recommended to use a single handler function and assign it to each event listener individually. Like so:
let paths = document.querySelectorAll('path');
// paths represents all path elements;
// assign event listeners to each path element;
for (let i=0; i<paths.length; i++) {
paths[i].addEventListener('click', displayAlert);
}
function displayAlert(event) {
alert(event.target.dataset.key)
}
<div>
<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="12345" 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>
</div>
Take note that the
displayAlert function is referenced within the event listener without parentheses or arguments. The event is automatically passed to the external function mentioned by name (ensure the function declaration supports an argument if utilizing the passed
event inside). While unlikely to cause memory issues with such a simple function, this is included for thoroughness.
Alternatively, consider attaching a single event listener to the div and verifying that the event's target is a path before displaying the related data. Despite being attached to the div, the event's target adjusts based on which child element was clicked:
let div = document.getElementById('svg-container');
div.addEventListener('click', event => {
if (event.target.tagName == 'path') alert(event.target.dataset.key)
});
<div id="svg-container">
<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="12345" 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>
</div>
Important note:
When using narrow strokes for paths, users might find it challenging to precisely click on the line, potentially leading to missed clicks. To address this, consider duplicating paths, setting wider strokes for enhanced visibility, or adding invisible rectangles behind characters for easier interaction.