JQuery基础之事件的基本用法

一、什么是事件？

jQuery是为事件处理特别设计的，所谓的事件就是页面对不同访问者的响

应，事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：

1、在元素上移动鼠标

2、选取单选按钮

3、点击元素

注：在事件中经常使用术语”触发”（或”激发”）例如： “当您按下按键时

触发 keypress 事件”。

常见 DOM 事件如下：

1、鼠标事件：click（单击）、dblclick（双击）、mouseenter（鼠标放

上）、mouseleave（鼠标离开）

2、键盘事件：keypress、keydown、keyup

3、表单事件：submit、change、focus、blur

4、文档/窗口事件：load、resize、scroll、unload

二、jQuery 事件方法语法

我们都知道在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方

法，那么如何指定一个事件及其触发的条件和结果？

1、首先在页面中指定一个事件（这里以点击事件click为例）：

实例：$(“p”).click();

2、接着定义什么时间触发事件以及触发的结果。您可以通过一个事件函数实现：

$(“p”).click(function(){

// 动作触发后执行的代码!!

});

三、常用的 jQuery 事件方法

1、(document).ready()：(document).ready() 方法允许我们在文档

完全加载完后执行函数

2、click()：click() 方法是当按钮点击事件被触发时会调用一个函数，该

函数在用户点击 HTML 元素时执行。

实例：

$("p").click(function(){

$(this).hide();

});

结果：当点击事件在某个 p元素上触发时，隐藏当前的 p 元素

3、dblclick()：当双击元素时，会发生 dblclick 事件。dblclick() 方法触

发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

实例：

$("p").dblclick(function(){

$(this).hide();

});

结果：当双击事件在某个 p元素上触发时，隐藏当前的 p 元素

3、mouseenter()：当鼠标指针穿过元素时，会发生mouseenter 事件，mouseenter() 方法触发mouseenter 事件，或规定当发生mouseenter 事件时运行的函数：

实例：

$("#p1").mouseenter(function(){

alert("You entered p1!");

});

结果：当鼠标移到这个p标签上时弹出窗口显示You entered p1!

4、mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件，mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

实例：

$("#p1").mouseleave(function(){

alert("Bye! You now leave p1!");

});

结果：鼠标离开这个p标签时弹出窗口显示Bye! You now leave p1!

5、mousedown()：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件，mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

实例：

$("#p1").mousedown(function(){

alert("Mouse down over p1!");

});

结果:当鼠标移到这个p标签上并按下时弹出窗口，显示Mouse down over p1

6、mouseup()：当在元素上松开鼠标按钮时，会发生 mouseup 事件，mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

实例：

$("#p1").mouseup(function(){

alert("Mouse up over p1!");

});

结果：当在所选p标签上松开鼠标时，弹出窗口显示Mouse up over p1!

7、hover()：hover()方法用于模拟光标悬停事件，当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave):

实例：$(“#p1”).hover(function(){

alert(“You entered p1!”);

},

function(){

alert(“Bye! You now leave p1!”);

});

结果：当鼠标悬停在所选的p标签上弹出窗口显示You entered p1!，当鼠标移出所选的p元素时弹出窗口显示Bye! You now leave p1!

8、focus()：当元素获得焦点时，发生 focus 事件，当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点，focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

实例：

$("input").focus(function(){

$(this).css("background-color","#cccccc");

});

结果：当这个输入框获得焦点时改变该文本框的背景颜色

9、blur()：当元素失去焦点时，发生 blur 事件、blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

实例：

$("input").blur(function(){

$(this).css("background-color","#ffffff");

});

结果：当输入框失去焦点时该表文本框的背景颜色为原来的颜色。