您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

使用绑定事件时,将创建较少的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()是jQuery 1.7中的新增功能,如果您使用的是1.7+,则.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在谈论触发时相对而言甚至更快)

其他 2022/1/1 18:13:52 有497人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶