jQuery on() 方法详解（一）

学它就看官方文档

定义和用法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

Event names and namespaces（事件名称和命名空间）

任何事件的名称，可以作为events 参数。jQuery将通过所有浏览器的标准JavaScript事件类型，当用户操作事件，如click，浏览器会调用handler参数的函数。此外，.trigger()方法可以触发标准的浏览器事件 和 自定义事件名绑定的处理程序。

事件名称可以添加指定的event namespaces（命名空间） 来简化删除或触发事件。例如，”click.myPlugin.simple”为 click 事件同时定义了两个命名空间 myPlugin 和 simple。通过上述方法绑定的 click 事件处理，可以用.off(“click.myPlugin”) 或 .off(“click.simple”)删除绑定到相应元素的Click事件处理程序，而不会干扰其他绑定在该元素上的“click（点击）” 事件。命名空间类似CSS类，因为它们是不分层次的;只需要有一个名字相匹配即可。

在.on()方法的第二种用法中，events参数是一个JavaScript对象或者键值对。键等同于events参数，用空格分隔的事件名称字符串和可选命名空间。每个键的值是一个函数（或false 的值），相当于 handler 参数，但是该值并不是方法中的最后一个参数。在其它方面，这两种形式在下面描述的内容中其行为都是相同的。如下所述。

Direct and delegated events（直接和委托的事件）

大多数浏览器事件冒泡, 或者 传播，都是由内到外的，从在文档最深处的元素( 事件目标 event target)开始， 一路传递到body和document元素。（注：事件冒泡简单的说就是，在冒泡路径上所有绑定了相同事件类型的元素上都会触发这些类型的事件。）在Internet Explorer 8和更低，一些事件，如change 和 submit本身不冒泡，但 jQuery 为了跨浏览器一致性， jQuery 在这些事件上模拟了冒泡行为。

如果省略selector或者是null，那么事件处理程序被称为直接事件 或者 直接绑定事件 。每次选中的元素触发事件时，就会执行处理程序，不管它直接绑定在元素上，还是从后代（内部）元素冒泡到该元素的

当提供selector参数时，事件处理程序是指为委派 事件（愚人码头注：通常也有很多人叫它代理事件）。事件不会在直接绑定的元素上触发，但当selector参数选择器匹配到后代（内部元素）的时候，事件处理函数才会被触发。jQuery 会从 event target 开始向上层元素(例如，由最内层元素到最外层元素)开始冒泡，并且在传播路径上所有绑定了相同事件的元素若满足匹配的选择器，那么这些元素上的事件也会被触发。

事件处理只能绑定在当前被选中的元素上;而且，在您的代码调用.on()的时候，他们必须在页面文档中已经存在。为了确保目前的元素可以被选择的（愚人码头注：即，存在），最好是在 document 的 ready 事件中进行事件绑定。如果新的HTML被注入页面时，新的HTML放置到页面后，事件会绑定到匹配选择器（selector参数）的元素。或者，使用委派事件绑定事件处理程序，如下所述。

委托事件有一个优势，他们能在后代元素添加到文档后，可以处理这些事件。 在确保所选择的元素已经存在的情况下，进行事件绑定时，您可以使用委派的事件，以避免频繁的绑定事件及解除绑定事件。 例如，这个已经存在的元素可以是 Model-View-Controller（模型 - 视图 - 控制器）模式中 View（视图） 的一个容器元素，或document。如果想监视所有文档中的冒泡事件的话。在加载任何其它 HTML 之前，document 元素在 head 中就是有效的，所以您可以安全的在 head 中进行事件绑定，而不需要等待文档加载完。

除了可以给未创建的后代元素绑定事件外（即上面提到的优势），代理事件的另一个好处就是，当需要监视很多元素的时候，代理事件的开销更小。例如，在一个表格的 tbody 中含有 1,000 行，下面这个例子会为这 1,000 元素绑定事件：

$("#dataTable tbody tr").on("click", function(event){
  alert($(this).text());
});

委派事件的方法只有一个元素的事件处理程序，tbody，并且事件只会向上冒泡一层（从被点击的tr 到 tbody ）:

$("#dataTable tbody").on("click", "tr", function(event){
  alert($(this).text());
});

注意: 委托事件不能用于SVG.

以上的知识基本够用了，下一篇更深层些
jQuery on() 方法详解（二）

最后

以上就是欢喜仙人掌为你收集整理的jQuery on() 方法详解（一）的全部内容，希望文章能够帮你解决jQuery on() 方法详解（一）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。