Question

以下陈述之间有什么区别？在某种情况下，我应该选择哪一个。

$(document).on("click","#btn",callback);

$("#btn").on("click",callback);

Answer 1

查看event delegation jQuery documentation

基本上

$(document).on("click","#btn",callback);

将单击绑定到文档DOM而不是直接绑定元素，这在将DOM元素附加到窗口时很有用，在这种情况下#btn选择器还不存在。

Answer 2

基本上没有直接

$(document).on("click","#btn",callback);

您正在为document分配影响匹配后代（#btn）的事件，这些事件在运行代码行时可能存在，也可能不存在。

$("#btn").on("click",callback);

使用委派，您将影响在运行代码行时确实存在的所有匹配元素，并且不会影响稍后创建的匹配元素。

http://api.jquery.com/on/

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时的页面上。要确保元素存在且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型 - 视图 - 控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他HTML之前，文档元素在文档的头部可用，因此可以安全地将事件附加到那里而无需等待文档准备就绪。

Answer 3

<强>直接

$("#btn").on("click",callback);

DOM中存在id的元素点击调用callback。如果是   存在于DOM处理程序中的内容将被附加。

将事件侦听器直接绑定到元素

<小时/> 的委托

阅读Event Delegation。

使用.on()

$(document).on("click","#btn",callback);


当文档中的元素添加id btn时，而不是单击该元素运行   callback功能。

将事件侦听器绑定到文档对象

语法

$( elements ).on( events, selector, data, handler );

Jquery差异B / W Jquery绑定事件

3 个答案: