jquery - 使用一个通用事件处理程序与单独的事件处理程序

Question

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

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

最佳实践是什么？

Answer 1

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

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

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

总而言之，如果满足以下条件，请使用单个主点击处理程序:

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

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