Javascript 活动授权：在哪里放置“活动授权”；如果；陈述

这里是Javascript新手

在活动授权中放置“如果”语句是否有“最佳实践”

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

假设我只想在单击id为子元素的元素时执行操作。为此，我使用“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');
       };
     },
};

---

谢谢

我会选择选项1。原因是您可以轻松地将其推广到处理任何事件委派，因此它是可重用的。样本：

var foo={
bindEvent:函数（选择器，回调）{//接受要使用其进行筛选的选择器
document.getElementById（'clickableElement'）。addEventListener（'click'，函数（e）{
const clickTarget=e.target；//获取元素
//检查原始目标是否与选择器匹配
if（target.matches（选择器））{
takeAnAction.call（foo）；
};
});
},  
takenAction:函数（）{
console.log（'Click'）；
},
};
foo.bindEvent（“子元素”，foo.takeAction）；

现在，您可以生成任意数量的委托事件绑定。添加另一个委托绑定非常简单，如下所示：

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

使用选项2，您不需要为每种情况更改实现或生成新功能：

/**/
takenAction:函数（事件）{
if（event.target.id==“子元素”）{
console.log（'click'）；
};
},
takeAnActionForParent:函数（事件）{
if（event.target.id==“父元素”）{
console.log（'click'）；
};
},
takeAnActionOnTableOfContentItems：函数（事件）{
if（event.target.classList.contains（“目录”）{
console.log（'click'）；
};
},

---

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

我将选择选项1。原因是因此，您可以轻松地将其推广到处理任何事件委派，因此它是可重用的。示例：

var foo={
bindEvent:函数（选择器，回调）{//接受要使用其进行筛选的选择器
document.getElementById（'clickableElement'）。addEventListener（'click'，函数（e）{
const clickTarget=e.target；//获取元素
//检查原始目标是否与选择器匹配
if（target.matches（选择器））{
takeAnAction.call（foo）；
};
});
},  
takenAction:函数（）{
console.log（'Click'）；
},
};
foo.bindEvent（“子元素”，foo.takeAction）；

现在，您可以生成任意数量的委托事件绑定。添加另一个委托绑定非常简单，如下所示：

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

使用选项2，您不需要为每种情况更改实现或生成新功能：

/**/
takenAction:函数（事件）{
if（event.target.id==“子元素”）{
console.log（'click'）；
};
},
takeAnActionForParent:函数（事件）{
if（event.target.id==“父元素”）{
console.log（'click'）；
};
},
takeAnActionOnTableOfContentItems：函数（事件）{
if（event.target.classList.contains（“目录”）{
console.log（'click'）；
};
},

---

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

旁注：

foo.takeAnAction.bind（foo）；foo.takanaAction（）；

将在此处做注释-

bind

通常返回一个设置了

this

的函数。但是，您不使用返回值。只需使用

foo.takanaAction.call（foo）；

或

foo.takanaAction.apply（foo）就更容易了

Thank@VLAZ-非常感谢您的输入。我只是伪装了一下，加入了我正在编写的代码库的一个摘录。为了简单起见，也许应该把它删减得更多。；（旁注：

foo.takeanaaction.bind（foo）；foo.takeanaaction（）；

将在此处做注释-

bind

通常返回一个设置了

this

的函数。但是，您不使用返回值。只使用

foo.takeAnAction.call（foo）；

或

foo.takeAnAction.apply（foo）更容易

谢谢@VLAZ-非常感谢您的输入。我只是伪装了一下，并加入了我正在编写的代码库的一个摘录。为了简单起见，也许应该把它删减得更多。；）