jQuery on() 方法

on()方法为所选元素和子元素附加一个或多个事件处理程序。

这也附加了事件发生时要运行的函数。

要删除事件处理程序，请使用off()方法。

若要附加仅运行一次然后将其自身删除的事件，请使用one()方法。

语法：

$(selector).on(event, childSelector, data, function)

将点击事件附加到所有<p>元素：

示例

$("p").on("click", function(){
  $(this).css("background-color", "coral");
});

将mouseenter事件附加到所有<p>元素：

示例

$("p").on("mouseenter", function(){
  $(this).css("background-color", "coral");
});

将多个事件处理程序添加到<div>元素：

示例

$("div").on("mouseenter mouseleave click", function(){
  $(this).text(Math.random());
});

将数据传递给函数：

示例

$(document).ready(function(){
  $("p").on("click", {msg: "你刚刚点了我!!!"}, showMsg)
});

function showMsg(event) {
  $(this).append(event.data.msg);
});

使用childSelector参数将click事件附加到所有<p>元素：

示例

$(document).ready(function(){
  $("body").on("click", "p", changeSize);
});

从<div>元素中删除mousemove事件：

示例

$("button").click(function(){
  $("div").off("mousemove");
});

参数	描述
event	指定一个或多个用空格分隔的事件或名称空间
childSelector	（可选）指定事件处理程序应仅附加到指定的子元素（而不是选择器本身）
data	（可选）指定要传递给该函数的其他数据注意：如果将数据参数提供给on()方法，则每次触发事件时，该参数都会在event.data属性中传递给处理程序
function	触发事件时执行的功能