事件委派：将"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 (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');
};
},

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