jQuery on() 方法

jQuery 事件

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触发事件时执行的功能

jQuery 事件