事件委托：在哪里放置“if”语句

Question

这里是Javascript新手。

在事件委托中放置“if”语句是否有“最佳实践”？

背景
我正在使用 vanilla Javascript 设置事件监听器（我知道 jQuery 等会简化事情，但我们还是使用 vanilla JS）：父元素上有一个事件监听器，当单击子元素时，它会调用一个函数。在我们的示例中，要调用的函数位于代码中的其他位置。

假设我只想在单击带有

id=child-element

的元素时执行操作。为此，我使用“if”语句。

有两个明显的地方我可以放置 if 语句：

1. 在事件监听器内
2. 函数内

问题
首选（1）还是（2）？如果是这样，为什么？ （“更好的内存管理”、“代码更容易阅读”等）

示例1

var foo = {
    bindEvent: function () {
        document.getElementById('clickableElement').addEventListener('click', function (e) {
            const clickTarget = e.target.id
            if (clickTarget === 'child-element') {
                foo.takeAnAction.bind(foo);
                foo.takeAnAction();
            };
        });
    },  
    takeAnAction: function () {
            console.log('Click');
    },
};

示例2

var foo = {
     bindEvent: function () {
        document.getElementById("clickableElement").addEventListener("click",
        foo.takeAnAction.bind(foo));
        },
     takeAnAction: function(e) {
       if (e.target.id === "child-element") {
         console.log('click');
       };
     },
};

谢谢！

Answer 1

我会选择选项 1。原因是您可以轻松地将其概括为处理任何事件委托，因此它是可重用的。样品：

var foo = {
    bindEvent: function (selector, callback) { //accept a selector to filter with
        document.getElementById('clickableElement').addEventListener('click', function (e) {
            const clickTarget = e.target; //take the element

            // check if the original target matches the selector
            if (clickTarget.matches(selector)) { 
                takeAnAction.call(foo);
            }
        });
    },  
    takeAnAction: function () {
            console.log('Click');
    },
};

foo.bindEvent("#child-element", foo.takeAction);

现在您可以生成任意数量的委托事件绑定。添加另一个委托绑定就像这样简单：

foo.bindEvent("#parent-element", foo.takeAction);
foo.bindEvent(".table-of-content", foo.takeAction);

使用选项 2，您无需更改实现或为每种情况生成新函数：

/*... */
takeAnAction: function(event) {
  if (event.target.id === "child-element") {
    console.log('click');
  };
},
takeAnActionForParent: function(event) {
   if (event.target.id === "parent-element") {
    console.log('click');
  };
},
takeAnActionOnTableOfContentItems: function(event) {
  if (event.target.classList.contains("table-of-content") {
    console.log('click');
  };
},

如果您需要在每种情况下执行相同的逻辑，那么实际上没有必要为每种情况添加新函数。因此，从可维护性的角度来看，在事件监听器中添加调用另一个函数的逻辑比生成要调用的不同函数更容易管理。