ボタンにaddEventListenerとネストされた要素を持つイベント委譲パターン

Question

私は親にボタンのセットを持っています。それぞれにはプログラムで追加されるSVGアイコンが含まれています。私は親要素をリッスンしようとしているし、特定のボタンの異なる機能をトリガするためにイベントデリゲーションを使用していますが、何が起きているのかは、ボタン自体ではなく、含まれているsvgやパスのイベントターゲットを取得することです。イベントのバブリングを活用する方法や、これをやっている方法を変えて、大量のイベントハンドラを追加するのを避け、必要なイベントをトリガする方法がありますか？相続人は、いくつかの単純化されたコード：私はJavaScriptで

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

、その後：

はJQueryを使用して

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

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

私は親要素に耳を傾け、その要素を指定することで、簡単にこれを行うことができるんだけど、私バニラJSでこれをやりたい。

大変お手伝いをいたします。

Answer 1

私は最も簡単な方法は、jQueryのclosestのような機能を持っているだろうと思います。

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>