Event Delegation Pattern mit addEventListener und verschachtelte Elemente in Schaltflächen

Question

Ich habe eine Reihe von Schaltflächen in einem Elternteil. Jede enthält ein SVG-Symbol, das programmgesteuert hinzugefügt wird. Ich versuche, auf das Elternelement zu hören und dann Ereignisdelegierung zu verwenden, um verschiedene Funktionen für bestimmte Schaltflächen auszulösen, aber was passiert, ist, dass ich Ereignisziele der enthaltenen SVGs oder Pfade anstelle der Schaltflächen selbst erhalte. Gibt es eine Möglichkeit, Event-Bubbling zu nutzen oder die Art, wie ich das tue, zu ändern, um immer noch eine Tonne von Event-Handlern zu vermeiden und die Ereignisse auszulösen, die ich brauche? Heres einige vereinfachte Code:

<div class="parent"> 
    // I have a whole lot of these added to the page programmatically 
    <button class="some-unique-class"> 
     <svg> //... </svg> 
    </button> 
</div> 

und dann in meinem javascript:

document.querySelector('.parent').addEventListener('click', function(event) { 

    //.. I always want to trigger events on the buttons, not 
    // on the svg's and their paths. 
}); 

mit JQuery Ich kann dies leicht tun, indem Sie auf ein übergeordnetes Element zu hören und dann das Element angibt, aber ich würde das gerne in Vanille JS machen.

Jede Hilfe würde massiv geschätzt werden.

Answer 1

Ich denke, der einfachste Weg, eine Funktion wie jQuerys closest zu haben wäre:

function closest(elem, selector) { 
 
    do { 
 
    if(elem.matches(selector)) return elem; 
 
    elem = elem.parentNode; 
 
    } while(elem); 
 
} 
 

 

 
document.querySelector('.parent').addEventListener('click', function(e) { 
 

 
    var btn = closest(e.target, 'button'); 
 
    btn.style.backgroundColor = 'red'; 
 
    
 
});

<div class="parent"> 
 
    <button class="some-unique-class"> 
 
     <b>hey</b> 
 
    </button> 
 
    <button class="some-unique-class"> 
 
     <b>hey</b> 
 
    </button> 
 
</div>