向页面添加复杂元素时的事件委托与直接绑定

使用绑定事件时，将创建较少的CPU开销，

$(<root-element>).on(<event>,<selector>)

话虽如此，当实际事件发生时，您将招致更多的CPU开销，因为它们必须使DOM膨胀到“ root”元素。

简短的故事： 绑定 事件处理程序 时，委托可以节省CPU ； 事件触发时 （例如，用户单击某些东西），bind可以节省CPU 。

因此，由您决定哪个点对性能更重要。添加新元素时，您是否有可用的CPU？如果是这样，则直接绑定到新元素将是整体性能最佳的选择，但是如果添加元素是占用大量CPU的操作，则您可能需要委派事件绑定，并让事件触发从所有冒泡事件中产生一些额外的CPU开销。

注意：

$(<root-element>).on(<event>, <selector>, <event-handler>)

是相同的：

$(<root-element>).delegate(<selector>, <event>, <event-handler>)

然后：

$(<selector>).on(<event>, <event-handler>)

是相同的：

$(<selector>).bind(<event>, <event-handler>)

.on()

.delegate(<selector>, <event>, <event-handler>)

.on(<event>, <selector>, <event-handler>)

更新

这是一个性能测试，表明委派事件绑定比单独绑定到每个元素要快： http :
//jsperf.com/bind-vs-click/29。
遗憾的是，此性能测试已被删除。

更新

这是一个性能测试，显示当您直接绑定到元素而不是委托绑定时，事件触发会更快：http : //jsperf.com/jquery-delegate-vs-bind-
triggering（请注意，这不是完美的性能测试，因为绑定方法已包含在测试中，但由于

delegate

bind