如下所示，是一个鼠标点击事件的示例：

什么是事件？

各种各样的访客行为就是所谓的事件（event）；所有的事件，指代某事件发生的某时刻。比如：

• 鼠标悬停在某个元素上
• 点击某个按钮
• 按下去某个键

下表是一些常用的DOM事件：

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

绑定事件的回调方法

所谓绑定某个事件的回调方法，就是当某个事件发生时，则会触发此方法，即回调函数会被调用运行。具体语法如下所示：

$("p").click(function(){
  // action goes here!!
  // 当p元素被点击，此间脚本则会调用运行来搞事

});

运行一下

当然还有另一种等效的写法：

function gaoshi(){
  // action goes here!!
  // 当p元素被点击，gaoshi函数则会运行

}

$("p").click( gaoshi );

运行一下

常用jQuery事件方法

$(document).ready()

当文档加载完毕后再搞事。具体例子上面已经介绍过很多了。

click() 点击事件

click()事件绑定指定元素后，目标元素一旦被点击，则会触发click()事件预设绑定的回调函数方法。

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

运行一下

dblclick() 双击事件

dblclick()事件绑定指定元素后，目标元素一旦被双击，则会触发dblclick()事件预设绑定的回调函数方法。

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

运行一下

mouseenter() 鼠标进入元素范围事件

mouseenter()事件绑定指定元素后，鼠标一旦进入目标元素范围内，则触发事件而运行回调函数。

$("#jerk").mouseenter(function(){
    alert("敢把鼠标移动进来，打不死你！");
});

运行一下

mouseleave() 鼠标从元素范围内移出事件

mouseleave()事件绑定指定元素后，鼠标一旦从目标元素范围内移动出去，则触发事件而运行回调函数。

$("#jerk").mouseleave(function(){
    alert("敢把鼠标移出去，打不死你！");
});

运行一下

mousedown() 鼠标在元素范围内按下鼠标任一键

mousedown()事件绑定指定元素后，鼠标一旦在元素范围内按下鼠标任一键，则触发事件而运行回调函数。

$("#jerk").mousedown(function(){
    alert("敢在太岁头上把鼠标按下，打不死你！");
});

运行一下

mouseup() 鼠标在元素范围内松开鼠标任一键

mouseup()事件绑定指定元素后，鼠标一旦在元素范围内松开鼠标任一键，则触发事件而运行回调函数。

$("#jerk").mouseup(function(){
    alert("敢在太岁头上把鼠标松开，打不死你！");
});

运行一下

hover() 鼠标悬浮

hover()事件是mouseenter()事件与mouseleave()事件的结合，当鼠标从元素外进入元素内，或者从元素内进入元素外，则都会触发事件而运行回调函数。

$("#jerk").hover(function(){
    alert("敢把用鼠标在本座头上晃来晃去，打不死你！");
});

运行一下

focus() 选中事件

focus()事件给指定表单元素绑定了一个事件监听器，当该表单被选中时，则都会触发事件而运行回调函数。

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

运行一下

blur() 失去选中状态事件

blur()事件给指定表单元素绑定了一个事件监听器，当该表单元素从选中状态变成未选中状态时，则都会触发事件而运行回调函数。

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

运行一下

on() 方法

可以通过on()方法来把不只一个事件绑定在指定元素上，如下所示。

绑定点击事件到所有<p>元素上：

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

运行一下

同时绑定多个事件到所有<p>元素上：

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "Tomato");
    }, 
    mouseleave: function(){
        $(this).css("background-color", "LightBlue");
    }, 
    click: function(){
        $(this).css("background-color", "Yellow");
    } 
});

运行一下