2

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

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

最佳做法是什么？

4

3 回答 3

2

海事组织——

$('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;
    }
}
于 2013-06-13T22:22:37.377 回答
2

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

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

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

总而言之，如果出现以下情况，请使用单个主单击处理程序：

  1. 您需要委托事件处理的优势来处理动态元素。
  2. 所有点击处理程序都是相同的，或者可以使用this和.data()引用将其分解为相同的代码。
  3. 点击处理程序大部分是相同的，任何单独的代码都可以有效地分支，而无需巨大的switch语句或巨型if/else树。

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

于 2013-06-13T22:41:39.050 回答
1

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

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]);
   }
}
于 2013-06-13T22:23:27.623 回答