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对象实例就会被传递给EventHandler。
可以通过Event的构造函数来创建事件，并触发事件。
vare=jQueery.Event("click")
jQuery("body").trigger(e);
甚至可以通过构造函数，把一个匿名对象放在Event中传递。
vare=jQuery.Event("keydown",{keyCode:64});
jQuery("body").trigger(e);
使用的时候，通过event.data.KeyCode来获取匿名对象的值。
可以通过jQuery.Event的构造函数把匿名对象放在Event中传递，不仅如此，通过事件也可以传递匿名对象。
$("p").click({param1:"Hello",param2:"World"},someFunction);
functionsomeFunction(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
ctrKeyctrl键被按下
shiftKeyShift键被按下
currentTarget冒泡阶段的当前元素
data
metaKey一般Meta键是Ctrl，而Mac上是Command键
pageX鼠标事件时光标相对于页面原点的水平坐标
pageY鼠标事件时光标相对于页面原点的垂直坐标
relatedTarget触发鼠标事件时光标离开或进入的元素
screenX鼠标事件时光标相对于屏幕原点的水平坐标
screenY鼠标事件时光标相对于屏幕原点的垂直坐标
result从前面的事件处理器返回最近非undefined的值
target触发事件的元素
timestampjQuery.Event创建实例时的时间戳，以毫秒为单位
type事件类型，比如click
which如果是键盘事件，代表按键的数字，如果是鼠标事件，记录按下的是左键、中键或右键
8.Event方法
event.preventDefault()阻止默认行为
event.stopPropgation()停止"冒泡"，即停止沿着DOM向上进一步传播
event.stopImmediatePropagation()停止所有事件的进一步传播
event.isDefaultPrevented()
event.isPropgationStopped()
isImmediatePropgagationStopped()
9.live方法和on方法
该方法允许我们为还不存在的元素创建事件。与bind方法不同的是：能为所有匹配的元素绑定事件，设置是那些暂时还不存在、需要动态创建的元素。而且，live方法不一定要放在$(function(){})就绪处理器中。到了jQuery1.7以后，就改为on方法了。
$("p").on("click",function(){
alert("hello");
})
如果想取消注册事件：
$("button").click(function(){
$("p").off("click");
})
10.trigger方法
当我们想手动触发元素绑定的事件时可以使用trigger方法。
$("#foo").on("click",function(){
alert($(this).text());
})
$("#foo").trigger("click");
还可以在绑定事件的时候出传入形参，在trigger事件的时候传入实参。
$("#foo").on("custom",function(event,param1,param2){
alert(param1+"\n"+param2)
})
$("#foo").trigger("custom",["Custom","Event"]);
trigger触发由jQuery.Event创建的实例：
varevent=jQuery.Event("logged");
event.user="foo";
event.pass="bar";
$("body").trigger(event);
甚至可以在trigger触发方法的时候传入匿名对象：
$("body").trigger({
type:"logged",
user:"foo",
pass:"bar"
});
如果想停止触发事件的传播，可通过jQuery.Event实例的stopPropgation()方法，或在任何事件中返回false。
11.triggerHandler方法
triggerHandler方法与trigger方法的不同之处在于：triggerHandler方法不会执行元素的默认事件，也不会"冒泡"。
//给一个元素绑定一个focus事件
$("input").focus(function(){
$("<span>Focused</span>").appendTo("#id").fadeOut(1000);
})
//用triggerHandler触发
$("#id").click(function(){
$("input").triggerHandler("focus");//不会触发focus的默认行为，即进入文本框
})
//用trigger触发
$("#id").click(function(){
$("input").trigger("focus");//同时触发foucs的默认行为和绑定行为
})
12.事件冒泡和事件委托
什么是事件冒泡？
有这么一段代码。
<!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <body> <div> <p><ahref="#foo"><span>IamaLink!</span></a></p> <p><ahref="#bar"><b><i>IamanotherLink!</i></b></a></p> </div> </body> </html>
现在，给该页面所有的元素绑定click事件，包括window和document。
$(function(){
$('*').add([document,window]).on('click',function(event){
event.preventDefault();
console.log(this);
});
});
当单击页面任何元素，单击事件会从当前元素开始，向上一级元素传播，直到最顶级元素，这里是window。
如何阻止事件冒泡？
显然，通常只希望在某个特定元素发生特定的事件，不希望事件冒泡的发生。这时候我们可以针对某个特定元素绑定事件。
$(function(){
$('a').on('click',function(event){
event.preventDefault();
console.log($(this).attr('href'));
});
});
以上，只为a绑定了click事件，无它。
如何有效利用事件冒泡？
在jquery中，事件委托却很好地利用了事件冒泡。
<html> <body> <divid="container"> <ulid="list"> <li><ahref="http://domain1.com">Item#1</a></li> <li><ahref="/local/path/1">Item#2</a></li> <li><ahref="/local/path/2">Item#3</a></li> <li><ahref="http://domain4.com">Item#4</a></li> </ul> </div> </body> </html>
现在，我们想给现有li中的a标签绑定事件，这样写：
$("#lista").on("click",function(event){
event.preventDefault();
console.log($(this).text());
});
但是，如果又在现有的ul中添加新的li和a，那情况又如何呢？
$("#list").append("<li><ahref='http://newdomain.com'>Item#5</a></li>");
结果，点击新添加的li中的a，什么都没有发生。那么，如何为动态添加的元素绑定事件呢？
如果我们能把事件绑定到a的父级元素，那在父级元素内生成的子级动态元素，也会有绑定事件的行为。
$("#list").on("click","a",function(event){
event.preventDefault();
console.log($(this).text());
});
以上，我们把click事件绑定到a的父级元素id为list的ul上，on方法中的第二个参数，这里是a，是事件真正的执行者。具体过程如下：
→点击某个a标签
→根据事件冒泡，触发了a的父级元素ul的click事件
→而事件真正的执行者是a
事件委托允许我们把事件绑定到父级元素，这相当于给所有的子级元素绑定了事件，不管这个子级元素是静态的、还是动态添加的。
13.toggle方法
允许我们依次执行多个事件，当执行完最后一个事件后，再执行第一个事件。
$('img[src*=small]').toggle({
function(){},
function(){},
function(){}
});
14.mouseenter和mouseleave方法
$(element).mouseenter(function(){}).mouseleave(function(){})
15.hover方法
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});
相信本文所述对大家的jQuery程序设计有一定的借鉴价值。