Java程序员从笨鸟到菜鸟之（九十）跟我学jquery（六）jquery中事件详解
由于jquery本身就是web客户端的有力帮手，所以事件对于它来说就显得尤为重要了，事件是脚本编程的灵魂. 所以此内容也是jQuery学习的重点。
在传统的javascript中，注册一个事件也是非常简单的事情，下面我们具体看一下一个简单的示例：
方法
描述
bind()
向匹配元素附加一个或更多事件处理器
blur()
触发、或将函数绑定到指定元素的 blur 事件
change()
触发、或将函数绑定到指定元素的 change 事件
click()
触发、或将函数绑定到指定元素的 click 事件
dblclick()
触发、或将函数绑定到指定元素的 double click 事件
delegate()
向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()
移除所有通过 live() 函数添加的事件处理程序。
error()
触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()
返回 event 对象上是否调用了 event.preventDefault()。
event.pageX
相对于文档左边缘的鼠标位置。
event.pageY
相对于文档上边缘的鼠标位置。
event.preventDefault()
阻止事件的默认动作。
event.result
包含由被指定事件触发的事件处理器返回的最后一个值。
event.target
触发事件的 DOM 元素。
event.timeStamp
该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type
描述事件的类型。
event.which
指示按了哪个键或按钮。
focus()
触发、或将函数绑定到指定元素的 focus 事件
keydown()
触发、或将函数绑定到指定元素的 key down 事件
keypress()
触发、或将函数绑定到指定元素的 key press 事件
keyup()
触发、或将函数绑定到指定元素的 key up 事件
live()
触发、或将函数绑定到指定元素的 load 事件
load()
触发、或将函数绑定到指定元素的 load 事件
mousedown()
触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()
触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()
触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()
触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()
触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()
触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()
触发、或将函数绑定到指定元素的 mouse up 事件
one()
向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()
文档就绪事件（当 HTML 文档就绪可用时）
resize()
触发、或将函数绑定到指定元素的 resize 事件
scroll()
触发、或将函数绑定到指定元素的 scroll 事件
select()
触发、或将函数绑定到指定元素的 select 事件
submit()
触发、或将函数绑定到指定元素的 submit 事件
toggle()
绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()
所有匹配元素的指定事件
triggerHandler()
第一个被匹配元素的指定事件
unbind()
从匹配元素移除一个被添加的事件处理器
undelegate()
从匹配元素移除一个被添加的事件处理器，现在或将来
unload()
触发、或将函数绑定到指定元素的 unload 事件
交互帮助方法：
除了基本的实践, jQuery提供了两个和事件相关的帮助方法: hover( over, out ) 和 toggle( fn, fn2, fn3,fn4,... )
1. hover( over, out )
hover函数主要解决在原始javascript中mouseover和mouseout函数存在的问题, 看下面这个示例:
有两个div(红色区域), 里面分别嵌套了一个div(黄色区域). HTML代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <title>toggle example</title> <link rel="stylesheet" type="text/css" href="css/hover.css"> <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script> <script type="text/javascript"> $(function() { $("li").toggle( function() { $(this).css({ "list-style-type": "disc", "color": "blue" }); }, function() { $(this).css({ "list-style-type": "square", "color": "red" }); }, function() { $(this).css({ "list-style-type": "none", "color": "" }); } ); }) </script></head><body> <ul> <li style="cursor:pointer">click me</li> </ul></body></html>结果是每点击一次"click me"变换一次列表符号和文字颜色.
使用jQuery事件对象
使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象.
jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQuery格式化后的事件对象作为唯一参数传入:
$("#testDiv").bind("click", function(event) { });
关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events/jQuery.EventjQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target 属性来获取事件的触发者(在IE中使用原生的事件对象, 需要访问event.srcElement).
下面是jQuery事件对象可以在扩浏览器支持的属性:
属性名称
描述
举例
type
事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click.
$("a").click(function(event) {
alert(event.type);
});
target
获取事件触发者DOM对象
$("a[href=http://google.com]").click(function(event) {
alert(event.target.href);
});
data
事件调用时传入额外参数.
$("a").each(function(i) {
$(this).bind('click', {index:i}, function(e){
alert('my index is ' + e.data.index);
});
});
relatedTarget
对于鼠标事件, 标示触发事件时离开或者进入的DOM元素
$("a").mouseout(function(event) {
alert(event.relatedTarget);
});
currentTarget
冒泡前的当前触发事件的DOM对象, 等同于this.
$("p").click(function(event) {
alert( event.currentTarget.nodeName );
});
结果:PpageX/Y
鼠标事件中, 事件相对于页面原点的水平/垂直坐标.
$("a").click(function(event) {
alert("Current mouse position: " + event.pageX + ", " + event.pageY );
});
result
上一个事件处理函数返回的值
$("p").click(function(event) {
return "hey"
});
$("p").click(function(event) {
alert( event.result );
});
结果:"hey"timeStamp
事件发生时的时间戳.
var last;
$("p").click(function(event) {
if( last )
alert( "time since last event " + event.timeStamp - last );
last = event.timeStamp;
});
上面是jQuery官方文档中提供的event对象的属性. 在"jQuery实战"一书中还提供了下面的多浏览器支持的属性, 时间关系我没有尝试每一个属性, 大家可以帮忙验证是否在所有浏览器下可用:
属性名称
描述
举例
altKey
Alt键是否被按下. 按下返回true
ctrlKey
ctrl键是否被按下, 按下返回true
metaKey
Meta键是否被按下, 按下返回true.
meta键就是PC机器的Ctrl键,或者Mac机器上面的Command键shiftKey
Shift键是否被按下, 按下返回true
keyCode
对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65.
对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠.which
对于键盘事件, 返回触发事件的键的数字编码. 对于鼠标事件, 返回鼠标按键号(1左,2中,3右).
screenX/Y
对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标
事件对象除了拥有属性, 还拥有事件. 有一些是一定会用到的事件比如取消冒泡 stopPropagation() 等.下面是jQuery事件对象的函数列表:
名称
说明
举例
preventDefault()
取消可能引起任何语意操作的事件. 比如<a>元素的href链接加载, 表单提交以及click引起复选框的状态切换.
$("a").click(function(event){
event.preventDefault();
// do something
});
isDefaultPrevented()
是否调用过
preventDefault()
方法
$("a").click(function(event){
alert( event.isDefaultPrevented() );
event.preventDefault();
alert( event.isDefaultPrevented() );
});
stopPropagation()
取消事件冒泡
$("p").click(function(event){
event.stopPropagation();
// do something
});
isPropagationStopped()
是否调用过
stopPropagation()
方法
$("p").click(function(event){
alert( event.isPropagationStopped() );
event.stopPropagation();
alert( event.isPropagationStopped() );
});
stopImmediatePropagation()
取消执行其他的事件处理函数并取消事件冒泡.
如果同一个事件绑定了多个事件处理函数, 在其中一个事件处理函数中调用此方法后将不会继续调用其他的事件处理函数.$("p").click(function(event){
event.stopImmediatePropagation();
});
$("p").click(function(event){
// This function won't be executed
});
isImmediatePropagationStopped()
是否调用过
stopImmediatePropagation()
方法
$("p").click(function(event){
alert( event.isImmediatePropagationStopped() );
event.stopImmediatePropagation();
alert( event.isImmediatePropagationStopped() );
});
这些函数中 stopPropagation() 是我们最长用的也是一定会用到的函数. 相当于操作原始event对象的event.cancelBubble=true来取消冒泡.
