龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

jQuery事件用法实例汇总

时间:2014-08-30 03:16来源:网络整理 作者:网络 点击:
分享到:
这篇文章主要介绍了jQuery事件用法实例汇总,对事件的绑定及各类事件的用法做了较为详尽的实例分析,有很好的借鉴价值,需要的朋友可以参考下

本文以实例形式详细汇总了jQuery中事件的用法,对jQuery的学习有很好的参考价值。分享给大家供大家参考之用。具体用法如下:

1.通过方法名给元素绑定事件:

$('li').click(function(event){})

2.通过bind方法给元素绑定事件:

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){}) 

可见,通过bind,可以给元素绑定多个事件。

3.事件的命名空间

为什么需要事件命名空间?

→假设,先给li元素绑定2个click事件。

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){}) 

→现在我们要把其中一个click事件注销掉,可能这样写:

$('li').unbind('click')

但这样,我们li所有的click事件都注销了,这不是我们想要的。使用事件命名空间可解决这一问题,之所以需要事件命名空间,是因为它为我们在注销事件的时候提供了方便。

如何使用事件命名空间?
→在为元素绑定事件的时候,在事件名称后加上命名空间,符合格式:事件名称.命名空间名称。

$('li')
 .bind('click.editMode',function(event){})
 .bind('click.displayMode',function(event){}) 

→在注销事件的时候,可以这样写:

$('li').unbind('click.editMode')

4.事件的种类

blur
change
click
dblclick
error
focus
focusin
focusout
keydown
keypress
keyup
load
mousedown
mouseenter
mouseleave
mousemove
mouseout
moseover
mouseup
ready
resize
scroll
select
submit
unload

5.one方法

用于创建一次性事件,一旦这个事件执行了一次后,就会被自动删除。

$("p").one("click",function(){
 $(this).animate({fontSize: "+=6px"});
})

6.删除事件

//先给元素添加事件
$("p").click(function(){
 $(this).slideToggle();
})
//再把元素的事件删除
$("button").click(function(){
 $("p").unbind();
})

7.Event属性

实际上,它是jquery的全局属性,jQuery.Event。每当触发事件,Event对象实例就会被传递给Event Handler。

可以通过Event的构造函数来创建事件,并触发事件。

var e = jQueery.Event("click")
jQuery("body").trigger(e);

甚至可以通过构造函数,把一个匿名对象放在Event中传递。

var e = jQuery.Event("keydown", {keyCode : 64});
jQuery("body").trigger(e);

使用的时候,通过event.data.KeyCode来获取匿名对象的值。

可以通过jQuery.Event的构造函数把匿名对象放在Event中传递,不仅如此,通过事件也可以传递匿名对象。

$("p").click({param1 : "Hello", param2 : "World"}, someFunction);
function someFunction(event){
 alert(event.data.param1);
 alert(event.data.param2);
}

可见,通过event.data可以获取匿名对象的键。

通过Event对象实例,还可以拿到其它方面的信息,比如:

$("p").click(function(event){
 alert(event.target.nodeName);
})

以上,通过event.target.nodeName获取触发事件的元素名称。

jQuery.Event的其它属性包括:

altKey 如果alt键按下就为true,在Mac键盘中alt键标记为Option
ctrKey ctrl键被按下
shiftKey Shift键被按下
currentTarget 冒泡阶段的当前元素
data
metaKey 一般Meta键是Ctrl,而Mac上是Command键
pageX 鼠标事件时光标相对于页面原点的水平坐标
pageY 鼠标事件时光标相对于页面原点的垂直坐标
relatedTarget 触发鼠标事件时光标离开或进入的元素
screenX 鼠标事件时光标相对于屏幕原点的水平坐标
screenY 鼠标事件时光标相对于屏幕原点的垂直坐标
result 从前面的事件处理器返回最近非undefined的值
target 触发事件的元素
timestamp jQuery.Event创建实例时的时间戳,以毫秒为单位
type 事件类型,比如click
which 如果是键盘事件,代表按键的数字,如果是鼠标事件,记录按下的是左键、中键或右键

8.Event方法

精彩图集

赞助商链接