Jquery差异B/w Jquery绑定事件

Jquery Difference B/w Jquery bind events

本文关键字：Jquery 绑定 事件 差异      更新时间：2024-03-08

以下语句之间有什么区别。在这种情况下，我应该选择哪一个而不是另一个。

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

查看事件委托jQuery文档

基本上

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

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

基本上有直接

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

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

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

通过委派，您将影响代码行运行时存在的所有匹配元素，而不会影响以后创建的匹配元素。

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

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

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

直接

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

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

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

委托

阅读事件委派。

使用.on（）

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

当文档中的元素添加了id btn时，单击该元素即可运行CCD_ 7函数。

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

语法

$( elements ).on( events, selector, data, handler );
相关文章：