如何在JQuery中设置事件？

Question

如何在JQuery中使用事件？

我有2个项目,在这两个项目中,我使用不同的方式使用JQuery设置事件.在第一个项目中,我使用如下:

$("#someID").click(SomeFunction);

在第二个项目中我使用如下:

$(document).on("click", "#someID", SomeFunction);

如果我尝试在第二个项目中使用第一种方式,它将无法工作.我更喜欢第一种方式.有什么不同吗？

Answer 1

第一个示例是正常的单击事件绑定.在那种情况下,元素应该在绑定时存在于dom中.这对动态生成的html不起作用.

第二个是事件委托方法.在这种情况下,元素可以是动态的.也就是说,您可以将事件绑定到将来的元素.

Answer 2

第二种方式使用惰性事件处理程序.这意味着如果在初始化这些事件后操作DOM ,则只有第二种方法可以工作.

这是因为第二个事件处理程序直接附加到文档而不是#someID元素.每当用户单击文档时,jQuery将确定单击的元素是否与#someID选择器匹配,然后才会触发配置的事件.

这允许您稍后添加#someID元素,即使在配置了事件之后也是如此.

官方名称是事件委托,您可以在此处找到更多信息和示例.

编辑:请注意,使用第二种方法时会有性能损失.这是因为jQuery必须在整个文档中搜索每次点击时匹配的元素.虽然#someID可能以非常快速,高性能的方式匹配,但您至少应该知道这种机制.

如果您仍然希望拥有延迟事件但希望最大限度地降低性能开销,我建议您缩小jQuery必须搜索的范围.例如,如果#someID元素始终出现在#someContainer元素中,则应该像这样配置事件:

$("#someContainer").on("click", "#someID", SomeFunction);

另外需要注意的是,此方法也可以获得性能提升.我是根据个人经验说话,并没有基准来证明这一点,但我注意到在大量对象上使用此方法时的更流畅的体验,例如带有大量li标签的ul标签,其中每个li标签需要一个事件监听器.在这种情况下,最好将一个事件侦听器附加到ul标记,而不是将n个事件附加到n li标记.