肉渣教程

jQuery 事件

上一节 下一节

如下所示,是一个鼠标点击事件的示例:

用鼠标来点我呀~

什么是事件?

各种各样的访客行为就是所谓的事件(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");
    } 
});

运行一下


jQuery 事件

上一节 下一节