jQuery 事件方法

事件是Web应用程序可以检测到的操作。

jQuery提供了将事件处理程序附加到选择的简单方法。

发生事件时，将执行提供的函数。

以下是示例事件：

• 网页加载

• 点击一个元素

• 将鼠标移到元素上

• 提交HTML表格

• 键盘上的按键等

事件方法的jQuery语法

在jQuery中，大多数DOM事件具有等效的jQuery方法。

要将点击事件分配给页面上的所有段落，请执行以下操作：

$("p").click();

下一步是定义事件发生时应发生的情况。您必须将一个函数传递给事件：

$("p").click(function(){
  // 需要执行的动作...
  });

此示例在单击页面时隐藏页面上的段落：

$("p").click(function(){
  $(this).hide();
});

本示例将一个“changeSize”函数附加到click事件：

$(document).ready(function(){
  $("p").click(changeSize);
function changeSize() {
  $(this).animate({fontSize: "+=5px"});
}

常用的jQuery事件方法

$（document）.ready()

jQuery $(document).ready() 方法指定在DOM完全加载时要执行的函数。

以下示例在加载DOM时显示一条消息：

$(document).ready(function(){
  $("p").text("现在已经加载了DOM，可以对其进行操作.");
});

click()

jQuery click() 方法将事件处理程序函数附加到所选元素。

当用户单击该元素时，将执行该函数：

$("p").click(function(){
  $(this).css({"background-color":"#007FFF", "color":"white"});
});

mouseenter()

jQuery mouseenter() 方法将事件处理程序函数附加到所选元素。

当鼠标指针进入该元素时，将执行该函数：

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

mouseleave()

jQuery mouseleave() 方法将事件处理程序函数附加到所选元素。

当鼠标指针离开该元素时，将执行该函数：

$("p").mouseleave(function(){
  $(this).css("background-color", "lightblue");
});

mousedown()

jQuery mousedown() 方法将事件处理程序函数附加到所选元素。

当用户在元素上按下鼠标按钮时，将执行该函数：

$("p").mousedown(function(){
  $(this).after("<p style='color:red;'>按下鼠标键</p>");
});

mouseup()

jQuery mouseup() 方法将事件处理程序函数附加到所选元素。

当鼠标悬停在该元素上时，释放鼠标按钮，将执行该函数：

$("p").mouseup(function(){
  $(this).after("<p style='color:green;'>释放鼠标键</p>");
});

keydown()

jQuery keydown() 方法将事件处理程序函数附加到所选元素。

当用户按下键盘上的键时，将执行该函数：

$("input").keydown(function(event){
  $(this).css("background-color", "yellow");
  $("span").text(event.type);
});

keyup()

jQuery keyup() 方法将事件处理程序函数附加到所选元素。

当用户释放键盘上的键时，将执行该函数：

$("input").keyup(function(event){
  $(this).css("background-color", "lightblue");
  $("span").text(event.type);
});

hover（）

jQuery hover() 方法具有两个函数，并且是 mouseenter() 和 mouseleave() 方法的组合。

下面的示例将鼠标指针悬停在上方时更改所有 <p> 元素的背景颜色：

$("p").hover(function(){
  $(this).css("background-color", "yellow");
  }, function(){
  $(this).css("background-color", "lightblue");
});

on()方法

jQuery提供了 on() 一种方法来响应所选元素上的任何事件。

使用 on() 方法，我们可以为所选元素附加一个或多个事件处理程序。

下面的示例将click事件附加到所有 <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());
});

off()方法

jQuery off() 方法删除该 on() 方法附带的一个或多个事件处理程序。

下面的示例从 <div> 元素中删除mousemove事件：

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

事件对象

jQuery的事件系统根据W3C标准标准化事件对象。

确保将事件对象传递给事件处理程序。

每个事件处理函数都会接收一个事件对象，其中包含许多属性和方法。

$("div").on("click", function(event){
  alert("Event type is " + event.type);
  alert("Target : " + event.target.innerHTML);
});

下表显示了所有事件对象的方法和属性：

jQuery事件参考

有关完整的事件参考，请访问我们的 jQuery Events 参考手册 。