Javascript 绑定多个事件或使用开关绑定一个事件更有效吗

我有许多事件要作为文档对象的委托绑定，如下所示：

$(document).on('click', '.create-post', Fti.Modals.createPostModal.open);
$(document).on('click', '.flag', Fti.modalHelper.openFlagModal);
$(document).on('click', '.login', Fti.Modals.loginModal.open);
$(document).on('click', '.register', Fti.Modals.registerModal.open);

通过一些创造性的重构，我做到了：

选项1。

var eventTriggers = [
    {
        element: '.create-post',
        event: Fti.Modals.createPostModal.open
    },{
        element: '.flag',
        event: Fti.modalHelper.openFlagModal
    },{
        element: '.login',
        event: Fti.Modals.loginModal.open
    },{
        element: '.register',
        event: Fti.Modals.registerModal.open
    }
];
for(var i = i, len = eventTriggers.length; i < len; i++){
    $(document).on('click', eventTriggers[i].element, eventTriggers[i].event)
}

var eventTriggers = [
    {
        element: '.create-post',
        event: Fti.Modals.createPostModal.open
    },{
        element: '.flag',
        event: Fti.modalHelper.openFlagModal
    },{
        element: '.login',
        event: Fti.Modals.loginModal.open
    },{
        element: '.register',
        event: Fti.Modals.registerModal.open
    }
];

var elements = eventTriggers.map(function(item){
    return item.element;
});

$(document).on('click', elements.join(','), function(e){
    var $target = $(e.target)
    for(var i = 0, len = eventTriggers.length; i < len; i++){
        if($target.hasClass(eventTriggers[i].element.substr(1))){
            eventTriggers[i].event.call(e.target);
        }
   }
});

var eventTriggers=[
{
元素：'.create post'，
事件：Fti.Modals.createPostModal.open
},{
元素：'.flag'，
事件：Fti.modalHelper.openFlagModal
},{
元素：'.login'，
事件：Fti.Modals.loginModal.open
},{
元素：'.register'，
事件：Fti.Modals.registerModal.open
}
];
for（var i=i，len=eventTriggers.length；i

我想知道是否最好只将一个事件绑定到document对象，并根据事件目标执行切换，如下所示：

$(document).on('click', '.create-post', Fti.Modals.createPostModal.open);
$(document).on('click', '.flag', Fti.modalHelper.openFlagModal);
$(document).on('click', '.login', Fti.Modals.loginModal.open);
$(document).on('click', '.register', Fti.Modals.registerModal.open);

选项2。

var eventTriggers = [
    {
        element: '.create-post',
        event: Fti.Modals.createPostModal.open
    },{
        element: '.flag',
        event: Fti.modalHelper.openFlagModal
    },{
        element: '.login',
        event: Fti.Modals.loginModal.open
    },{
        element: '.register',
        event: Fti.Modals.registerModal.open
    }
];
for(var i = i, len = eventTriggers.length; i < len; i++){
    $(document).on('click', eventTriggers[i].element, eventTriggers[i].event)
}

var eventTriggers = [
    {
        element: '.create-post',
        event: Fti.Modals.createPostModal.open
    },{
        element: '.flag',
        event: Fti.modalHelper.openFlagModal
    },{
        element: '.login',
        event: Fti.Modals.loginModal.open
    },{
        element: '.register',
        event: Fti.Modals.registerModal.open
    }
];

var elements = eventTriggers.map(function(item){
    return item.element;
});

$(document).on('click', elements.join(','), function(e){
    var $target = $(e.target)
    for(var i = 0, len = eventTriggers.length; i < len; i++){
        if($target.hasClass(eventTriggers[i].element.substr(1))){
            eventTriggers[i].event.call(e.target);
        }
   }
});

var eventTriggers=[
{
元素：'.create post'，
事件：Fti.Modals.createPostModal.open
},{
元素：'.flag'，
事件：Fti.modalHelper.openFlagModal
},{
元素：'.login'，
事件：Fti.Modals.loginModal.open
},{
元素：'.register'，
事件：Fti.Modals.registerModal.open
}
];
var elements=eventTriggers.map（函数（项）{
返回item.element；
});
$（文档）.on（'click'，elements.join（'，'））函数（e）{
变量$target=$（e.target）
for（var i=0，len=eventTriggers.length；i

---

有没有人对哪种选择的效果更好有什么建议或经验

使用多个侦听器实现灵活性。如果您需要分离/删除其中一个，则不会影响其他浏览器。

根据您的浏览器，性能差异似乎可以忽略不计，大约为10%。在webkit浏览器中，添加一个事件侦听器似乎需要不到一毫秒的时间（您的四个事件有时需要1毫秒才能连接）。对于100k迭代，在i5CPU上大约需要5到7秒

除非你一直在做很多类似的事情，否则这看起来像是过早的优化。如果可能的话，考虑使用其他的<代码> ID>代码>选择器，而不是<代码>类>代码>选择器，因为这样可以节省更多的时间。

<a class="create-post">c</a><a class="flag">f</a><a class="login">l</a><a class="register">r</a>
<script>
$(document).ready(function () {
    var iterations = 100000;
    var simple = 0;
    var trigger = 0;
    var eventTriggers = [{
        element: '.create-post',
        event: function () {}
    }, {
        element: '.flag',
        event: function () {}
    }, {
        element: '.login',
        event: function () {}
    }, {
        element: '.register',
        event: function () {}
    }];

    var mt = (new Date).getTime();
    var iteration = 0;
    while (iteration < iterations) {
        $(document).on('click', '.create-post', function () {});
        $(document).on('click', '.flag', function () {});
        $(document).on('click', '.login', function () {});
        $(document).on('click', '.register', function () {});
        iteration++;
    }
    simple = (new Date).getTime() - mt;


    var mt = (new Date).getTime();
    var iteration = 0;
    while (iteration < iterations) {
        for (var i = 0; i < eventTriggers.length; i++) {
            $(document).on('click', eventTriggers[i].element, eventTriggers[i].event);
        }
        iteration++;
    }
    trigger = (new Date).getTime() - mt;

    console.log('simple: ' + simple + 'ms');
    console.log('trigger: ' + trigger + 'ms');
    console.log('diff: ' + (simple - trigger) + 'ms at ' + iterations + ' iterations');
});
</script>

cflr
$（文档）.ready（函数（）{
var迭代次数=100000次；
var-simple=0；
var触发器=0；
var eventTriggers=[{
元素：'.create post'，
事件：函数（）{}
}, {
元素：'.flag'，
事件：函数（）{}
}, {
元素：'.login'，
事件：函数（）{}
}, {
元素：'.register'，
事件：函数（）{}
}];
var mt=（新日期）.getTime（）；
var迭代=0；
while（迭代<迭代）{
$（document）.on（'click'，'createpost'，函数（）{}）；
$（document）.on（'click'，'.flag'，function（）{}）；
$（document）.on（'click'，'login'，function（）{}）；
$（document）.on（'click'，'register'，function（）{}）；
迭代++；
}
simple=（新日期）.getTime（）-mt；
var mt=（新日期）.getTime（）；
var迭代=0；
while（迭代<迭代）{
对于（var i=0；i

在我的特定用例中，以这种方式绑定的事件是页面上的永久固定装置，任何时候都不需要分离它们。除此之外，是否有其他场景支持对多个侦听器的需求。此外，我正在寻找与效率和性能相关的答案