事件委派模式，在按钮中使用 addEventListener 和嵌套元素

Event Delegation Pattern with addEventListener and nested elements in buttons

本文关键字：addEventListener 嵌套 元素 模式 委派 按钮 事件      更新时间：2023-09-26

我在父级中有一组按钮。 每个都包含一个以编程方式添加的 SVG 图标。 我正在尝试侦听父元素，然后使用事件委托为特定按钮触发不同的功能，但是发生的事情是我获得了包含的 svg 或路径的事件目标，而不是按钮本身。 有没有办法利用事件冒泡，或者改变我这样做的方式，以避免添加大量事件处理程序，并触发我需要的事件？ 下面是一些简化的代码：

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

然后在我的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.  
});

使用 JQuery，我可以通过侦听父元素然后指定元素来轻松做到这一点，但我想在 vanilla JS 中执行此操作。

任何帮助将不胜感激。

我想最简单的方法是有一个像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>

相关文章：
  • 没有找到相关文章