jQuery事件

jQuery 可以响应HTML页面中的事件.

事件是什么?

网页可以响应的所有访问者的行为称为事件.

事件代表某个时刻发生的事情.

实例:

  • 在元素上移动鼠标
  • 选择单选按钮
  • 点击元素

术语 "触发" 经常用在事件里面. 例如: "你按下一个按键，keypress事件被触发".

这里有一些常见的DOM事件:

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

jQuery事件方法语法

在jQuery里面, 大多数DOM事件有一个等效的jQuery方法。

若要为页面上的所有段落分配单击事件，您可以这样做:

$("p").click();

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

$("p").click(function(){
  // action goes here!!
});

常用的jQuery事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载时执行一个函数. 此事件已经在jQuery语法一章解释过.

click()

click() 接收一个事件处理函数.

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

下面的实例表示: 当点击<p>元素时; 隐藏当前 <p> 元素:

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

让我试试

dblclick()

dblclick() 接收一个事件处理函数.

当用户在HTML元素上双击时，函数被执行。

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

让我试试

mouseenter()

mouseenter() 接收一个事件处理函数.

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

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

让我试试

mouseleave()

mouseleave() 接收一个事件处理函数.

当鼠标离开HTML元素时，函数被执行:

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

让我试试

mousedown()

mousedown() 接收一个事件处理函数.

当鼠标按下时，函数被执行:

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

让我试试

mouseup()

mouseup() 接收一个事件处理函数.

当鼠标抬起时，函数被执行:

$("#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() 接收一个事件处理函数.

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

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

让我试试

blur()

blur() 接收一个事件处理函数.

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

$("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");
    }
});

让我试试