事件委托：放置 "if" 语句的位置

Question

Javascript这里是新手。

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

上下文
我正在使用 vanilla Javascript 设置事件侦听器（我知道 jQuery 等会简化事情，但让我们坚持使用 vanilla JS）：父元素上有一个事件侦听器单击子项时调用函数。在我们的示例中，要调用的函数位于代码的其他位置。

假设我只想在单击带有 id=child-element 的元素时执行操作。为此，我使用“if”语句。

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

在事件侦听器中
函数内

问题
首选 (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 (target.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');
  };
},

如果您需要在每个案例中执行相同的逻辑，那么确实没有必要为每个案例都添加一个新函数。因此，从可维护性的角度来看，在将调用另一个函数的事件侦听器中添加逻辑比生成要调用的不同函数更易于管理。

事件委托：放置 "if" 语句的位置

Event Delegation: where to put the "if" statement

javascript

performance

if-statement

event-handling

addeventlistener