Question

我们有一个包含10个子元素的元素。他们每个人都必须处理click事件。 10个子元素停止将点击传播到父级。此时，我们开始添加相同父元素的实例，并且必须实时附加事件处理程序。

我想知道只有一个click事件 - 父事件之一，并检查点击了哪个子元素是否更好。处理程序中将有10个if语句，它们调用不同的函数。我们认为这是浏览器附加活动的更有效方式。

最佳做法是什么？

Answer 1

IMO -

$('parent').on('click', 'child', function(e){
    e.stopPropagation();
    doWork($(this));    
});

这是一个处理这个问题的函数。

function doWork(ele){
    //ele is already a jQuery object, don't wrap again, it's cached
    switch(ele.prop('someUniqueIdentifier')){
        case 'whatever':
            //do your stuff, make more cases
            break;
    }
}

Answer 2

如果你的所有点击处理程序都有完全独立的代码而没有任何共同点，那么你只是比较让系统调度事件而不是你调度事件。通常，除非您拥有动态元素，否则让系统调度它们会更容易，更高效，在这种情况下，您可能希望使用委派事件处理的优点，这样您就不必在每次创建新事件时都附加新的事件处理程序子元件。

但是，如果您的点击处理程序具有重要的公共代码，或者您的每个事件处理程序都可以被分解为公共代码和非公共代码，那么在一个地方使用一个单击处理程序执行公共代码可能更有效然后分支更具体的代码。

如果在你的一个主单击处理程序中，你最终实现了一个巨大的switch语句或巨大的if / else语句，每个节点都有一个分支，那么你可能走错了路。我只使用一个主点击处理程序，如果代码最常见，并且有一种非常有效的分支方式（没有巨大的switch或if/else块）或者我需要委托的优点动态元素的事件处理。

总结一下，如果出现以下情况，请使用单个主点击处理程序：

您需要委派事件处理的优势来处理动态元素。
所有点击处理程序都是相同的，或者可以使用this和.data()引用计入相同的代码中。
点击处理程序大致相同，任何单独的代码都可以在没有巨型switch语句或巨型if/else树的情况下高效分支。

如果不是这种情况（例如，点击处理程序通常都是独立的并且元素不是动态的），那么只需让系统调度到不同的点击处理程序并将公共代码分解为可以从每个处理器调用的常用函数。单独的事件处理程序，以避免在每个事件处理程序中重复任何代码。

Answer 3

我创建了一个函数，该函数创建一个对象，该对象映射每个子元素的类（假设您将一个类分配给单个父元素内部唯一的每个子元素）到一个函数并循环遍历该数组将函数附加到单击事件。像这样：

function createEventHandlers(yourarguments) {
   return {
     'subelement1': function(e) { alert("1 was clicked with arguments" + yourarguments); },
     'subelement2': function(e) { alert("2 was clicked with arguments" + yourarguments); },
     //...
   };
}

function setSubElementClickHandlers(element, arguments) {
   var eventHandlers = createEventHandlers(arguments);
   for(cls in eventHandlers) {
       $(element).children('.' + cls).click(eventHandlers[cls]);
   }
}

使用一个公共事件处理程序与单独的

3 个答案: