jQuery 事件方法

什么是事件？

网页可以响应的所有不同访客操作都称为事件。

事件代表了某件事情发生的精确时刻。

例如：

• 将鼠标移到元素上
• 选择单选按钮
• 点击元素

“触发”这个术语经常与事件一起使用。例如：“按下按键的那一刻，就会触发按键事件”。

以下是一些常见的 DOM 事件：

jQuery 事件方法的语法

在 jQuery 中，大多数 DOM 事件都有对应的 jQuery 方法。

要为页面上的所有段落分配点击事件，可以这样做：

$("p").click();

下一步是定义事件触发时应该发生什么。您必须向事件传递一个函数：

$("p").click(function(){
  // 要执行的操作写在这里！！
});

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载后执行一个函数。该事件已在 jQuery 语法章节中介绍过。

click()

click() 方法将一个事件处理函数附加到 HTML 元素上。

当用户点击 HTML 元素时，该函数将被执行。

下例表示：当 <p> 元素上发生点击事件时，隐藏当前的 <p> 元素：

实例

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

亲自试一试

dblclick()

dblclick() 方法将一个事件处理函数附加到 HTML 元素上。

当用户双击 HTML 元素时，该函数将被执行：

实例

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

亲自试一试

mouseenter()

mouseenter() 方法将一个事件处理函数附加到 HTML 元素上。

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

实例

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

亲自试一试

mouseleave()

mouseleave() 方法将一个事件处理函数附加到 HTML 元素上。

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

实例

$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});

亲自试一试

mousedown()

mousedown() 方法将一个事件处理函数附加到 HTML 元素上。

当鼠标悬停在 HTML 元素上并按下左键、中键或右键时，该函数将被执行：

实例

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});

亲自试一试

mouseup()

mouseup() 方法将一个事件处理函数附加到 HTML 元素上。

当鼠标悬停在 HTML 元素上并释放左键、中键或右键时，该函数将被执行：

实例

$("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});

亲自试一试

hover()

hover() 方法接受两个函数，是 mouseenter() 和 mouseleave() 方法的组合。

第一个函数在鼠标进入 HTML 元素时执行，第二个函数在鼠标离开 HTML 元素时执行：

实例

$("#p1").hover(function(){
  alert("You entered p1!");
},
function(){
  alert("Bye! You now leave p1!");
});

亲自试一试

focus()

focus() 方法将一个事件处理函数附加到 HTML 表单字段上。

当表单字段获得焦点时，该函数将被执行：

实例

$("input").focus(function(){
  $(this).css("background-color", "#cccccc");
});

亲自试一试

blur()

blur() 方法将一个事件处理函数附加到 HTML 表单字段上。

当表单字段失去焦点时，该函数将被执行：

实例

$("input").blur(function(){
  $(this).css("background-color", "#ffffff");
});

亲自试一试

on()

on() 方法为被选元素附加一个或多个事件处理函数。

为 <p> 元素附加点击事件：

实例

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

亲自试一试

为 <p> 元素附加多个事件处理函数：

实例

$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

亲自试一试