Java程序员从笨鸟到菜鸟之九十跟我学jquery六jquery中事件详解由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“jquery事件的一些方法”。
由于jquery本身就是web客户端的有力帮手，所以事件对于它来说就显得尤为重要了，事件是脚本编程的灵魂.所以此内容也是jQuery学习的重点。
在传统的javascript中，注册一个事件也是非常简单的事情，下面我们具体看一下一个简单的示例：
document.getElementById(“testDiv2”).onclick = showMsg;
等效于:
单击事件 1
注意两者的区别了吗?我们常用的修改元素属性添加事件的方式,实际上是建立了一个匿名函数:
document.getElementById(“testDiv1”).onclick = function(event){ alert(“！!”);};
这个匿名函数的签名和我们手写的showMsg签名相同,所以可以把showMsg直接赋值给onclick.这种方式的弊端是:
1.只能为一个事件绑定一个事件处理函数.使用“=”赋值会把前面为此时间绑定的所有事件处理函数冲掉.2.在事件函数(无论是匿名函数还是绑定的函数)中获取事件对象的方式在不同浏览器中要特殊处理: 3.添加多播委托的函数在不同浏览器中是不一样的.所以我们首先应该摒弃这种通过修改元素属性添加事件的方式.尽量使用添加多播事件委托的方式为一个事件绑定多个事件处理函数,比如为document对象的单击事件添加一个关闭弹出层的方法,使用多播就不会影响document对象原有的事件处理函数.Jquery事件：
从上面我们看到了javascript中注册事件的弊端了，这些弊端真正避免起来也挺麻烦的，所以jquery想到了这一点，他几乎把javascript中的事件弊端解决到了极点，我们可以很简单的实现我们在javascript中很麻烦才能实现的功能。正所谓有了jQuery,天天喝茶水.下面是在jQuery中最常使用的bind()方法举例:
$(“#testDiv”).bind(“click”, showMsg);
我们为id是testDiv4的元素,添加列click事件的事件处理函数showMsg.使用jQuery事件处理函数的好处: 1.添加的是多播事件委托.也就是为click事件又添加了一个方法,不会覆盖对象的click事件原有的事件处理函数.$(“#testDiv”).bind(“click”, function(event){ alert(“one”);});$(“#testDiv”).bind(“click”, function(event){ alert(“two”);});
单击testDiv对象时,依次提示“one”和“two”.2.统一了事件名称.添加多播事件委托时,ie中是事件名称前面有“on”.但是使用bind()函数我们不用区分ie和dom,因为内部jQuery已经帮我们统一了事件的名称.3.可以将对象行为全部用脚本控制.让HTML代码部分只注意“显示”逻辑.现在的趋势是将HTML的行为,内容与样式切分干净.其中用脚本控制元素行为,用HTML标签控制元素内容,用CSS控制元素样式.使用jQuery事件处理函数可以避免在HTML标签上直接添加事件.Jquery常用事件函数：
虽然我们可以使用事件处理函数完成对象事件的几乎所有操作,但是jQuery提供了对常用事件的封装.比如单击事件对应的两个方法click()和click(fn)分别用来触发单击事件和设置单击事件.设置单击事件:
$(“#testDiv”).click(function(event){ alert(“test div clicked!”);});
等效于:
$(“#testDiv”).bind(“click”, { alert(“test div clicked!”);});
触发单击事件:
$(“#testDiv”).click();
等效于
$(“#testDiv”).trigger(“click”);
注意这里等效的是trigger而不是triggerHandler.下面我们来看一下这些常用的事件函数
方法
描述
bind()
向匹配元素附加一个或更多事件处理器
blur()
function(event)触发、或将函数绑定到指定元素的blur事件
change()
触发、或将函数绑定到指定元素的change事件
click()
触发、或将函数绑定到指定元素的click事件
dblclick()
触发、或将函数绑定到指定元素的doubleclick事件
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()
触发、或将函数绑定到指定元素的keydown事件
keypre()
触发、或将函数绑定到指定元素的keypre事件
keyup()
触发、或将函数绑定到指定元素的keyup事件
live()
触发、或将函数绑定到指定元素的load事件
load()
触发、或将函数绑定到指定元素的load事件
mousedown()触发、或将函数绑定到指定元素的mousedown事件
mouseenter()
触发、或将函数绑定到指定元素的mouseenter事件
mouseleave()
触发、或将函数绑定到指定元素的mouseleave事件
mousemove()
触发、或将函数绑定到指定元素的mousemove事件
mouseout()
触发、或将函数绑定到指定元素的mouseout事件
mouseover()
触发、或将函数绑定到指定元素的mouseover事件
mouseup()
触发、或将函数绑定到指定元素的mouseup事件
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代码如下:
Outer 1 Inner 1 Outer 2 Inner 2
绑定如下事件:
function report(event){ $('#console').append(''+event.type+'');} $(function(){ $('#outer1').bind('mouseover',report).bind('mouseout',report);$('#outer2').hover(report,report);});
Outer1我们使用了mouseover和mouseout事件,当鼠标从Outer1的红色区域移动到黄色区域时,会发现虽然都是在outer1的内部移动,但是却触发了mouseout事件:
很多时候我们不希望出现上图的结果,而是希望只有鼠标在Outer1内部移动时不触发事件,Outer2使用Hover()函数实现了这个效果:
注意这里的事件名称进入叫做“mouseenter”,离开叫做“mouseleave”,而不再使用“mouseover”和“mouseleave”事件.有经验的开发人员会立刻想到在制作弹出菜单时,经常遇到这个问题:为弹出菜单设置了mouseout事件自动关闭,但是鼠标在弹出菜单内移动时常常莫名其妙触发mouseout事件让菜单关闭.hover()函数帮助我们很好的解决了这个问题.2.toggle(fn,fn2,fn3,fn4,...)toggle函数可以为对象添加click事件绑定函数,但是设置每次点击后依次的调用函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
可以使用unbind(“click”)来删除。下面的示例演示如何使用toggle函数:
toggle example $(function(){ $(“li”).toggle(function(){ $(this).c({ “list-style-type”: “disc”, “color”: “blue” });}, function(){ $(this).c({ “list-style-type”: “square”, “color”: “red” });}, function(){ $(this).c({ “list-style-type”: “none”, “color”: “” });（参考：http://www.daodoc.com）});})click me
