jQuery事件

“事件”往往都是页面的一些动作引起的,例如当用户按下鼠标、提交表单或者移动鼠标时事件都会出现。不同的用户行为会触发不同的事件。

“jQuery事件操作”与“javaScript DOM操作”一样,是核心内容,但jQuery事件操作更加简单方便,减少了大量的代码编写。

在jQuery中,主要包括以下事件:

(1)页面载入事件

(2)鼠标事件

(3)表单事件

(4)键盘事件

(5)滚动事件

(6)绑定事件

(7)合成事件

(8)其他事件

一、页面载入事件

可以使用以下三种语法:

语法一:

$(document).ready(function)

语法二:

$().ready(function)

语法三:

$(function)

在jQuery中,我们使用上面三种方法代替javaScript中window.onload()方法。

二、鼠标事件

鼠标事件指的是,操作鼠标时触发的事件。在jQuery中,常见的鼠标事件如下:

鼠标事件 说明 
 click 当点击元素时,会发生 click 事件。
 dclick 当双击元素时,会发生 dblclick 事件。
 mouseover 当鼠标指针从元素上移开时,发生 mouseout 事件
 mouseout 当鼠标指针从元素上移开时,发生 mouseout 事件。
 mousemove 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。
 mousedown 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
 mouseup 当在元素上放松鼠标按钮时,会发生 mouseup 事件。
 mouseenter 当鼠标指针穿过元素时,会发生 mouseenter 事件。

三、表单事件

在jQuery中,常见的表单事件如下:  

表单事件 说明 
 foucus 当元素获得焦点时,发生 focus 事件。
 blur 当元素失去焦点时,发生 blur事件。
 change 当元素的值发生改变时,会发生 change 事件。
 select 当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
 submit 当提交表单时,会发生submit事件。

四、键盘事件

在jQuery中,通常是使用这三个事件来捕获键盘事件的,他们有一定的先后顺序:

keydown>keypress>keyup。

键盘事件 说明 
 keydown 当按下键(包括数字键、功能键),发生 keydown 事件。
 keypress 当按下数字键,发生 keypress 事件。 keypress事件是在键盘上的某个键被按下
 到松开“整个过程”中触发的事件。
 keyup 当放开键(包括数字键、功能键),发生keyup事件。

五、滚动事件

滚动事件 说明 
 scroll 当滚动条位置发生改变时,发生 scroll 事件。

说明:参数fn表示事件处理函数,也就是function(){}。

$().scroll(function)

六、绑定及解绑事件

绑定事件:

on()方法在被选元素上添加一个或多个事件处理程序。(适用于当前及未来的元素)

$().on(type , function)

解绑事件:

off()方法通常用于移除通过on()方法的事件处理程序。

$().off(type)

 七、合成事件

在jQuery中,我们可以使用hover()方法一次性定义“鼠标移入”和“鼠标移出”两个事件,这就是合成事件。  

$().hover(function1,function2);

说明:function1代表鼠标移入时触发的事件处理函数,function2表示鼠标移出时触发的事件处理函数。

八、其他事件

其他事件 说明 
 bind 为被选元素添加一个或多个事件处理程序,并规定事件发生时
 运行的函数。 $(selector).bind(event,data,function)
(一般用on()方法代替)
 unbind 移除被选元素的事件处理程序。
 $(selector).unbind(event,function)
(一般用off()方法代替)  
 load 当指定的元素(及子元素)已加载时,会发生 load() 事件。
 $(selector).load(function)
 unload 当用户离开页面时,会发生 unload 事件。
 event.unload(function)
 delegate  为指定的元素(属于被选元素的子元素)添加一个或多个事件
 处理程序, 并规定当这些事件发生时运行的函数。
 $(selector).delegate(childSelector,event,data,function)
(一般用on()方法代替)  
 undelegate 删除由 delegate() 方法添加的一个或多个事件处理程序。
 $(selector).undelegate(selector,event,function)
(一般用off()方法代替)    
 trigger 触发被选元素的指定事件类型。
 $(selector).trigger(event,[param1,param2,...])
 triggerHandler 触发被选元素的指定事件类型。但不会执行浏览器默认动作,
 也不会产生事件冒泡。
 $(selector).triggerHandler(event,[param1,param2,...])
 resize 当调整浏览器窗口的大小时,发生 resize 事件。
 $(selector).resize()
 die 移除所有通过 on() 方法向指定元素添加的一个或多个事件
 处理程序。$(selector).die(event,function)
(一般用off()方法代替)    
 error 当元素遇到错误(没有正确载入)时,发生 error 事件。
 $(selector).error()
 event.isDefaultPrevented 返回指定的 event 对象上是否调用了 preventDefault()
 方法。event.isDefaultPrevented()
 event.pageX 相对于文档左边缘的鼠标位置。
 event.pageY 相对于文档上边缘的鼠标位置。
 event.preventDefault 阻止元素发生默认的行为(例如,当点击提交按钮时阻止
 对表单的提交)。event.preventDefault()
 event.result 包含由被指定事件触发的事件处理器返回的最后一个值。
 event.target 触发该事件的 DOM 元素。
 event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
 event.type 描述事件的类型。
 event.which 指示按了哪个键或按钮。


上一篇: jQuery选择器
下一篇: jQuery效果
作者邮箱: 203328517@qq.com