jQuery 参考手册 - 事件
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
bind()向匹配元素附加一个或更多事件处理器
$(selector).bind(event,function) $(selector).bind({event:function, event:function, ...}) $("button").bind("click",function(){ $("p").slideToggle();//为button绑定一个click事件和函数 });
blur()触发、或将函数绑定到指定元素的 blur 事件
$(selector).blur() $(selector).blur(function) $("input").blur(function(){ $("input").css("background-color","#D6D6FF");//当元素失去焦点时,会触发事件 });
change()触发、或将函数绑定到指定元素的 change 事件(该事件仅适用于文本域(text field),以及 textarea 和 select 元素)
$(selector).change() $(selector).change(function) $(".field").change(function(){ $(this).css("background-color","#FFFFCC");//当元素的值发生改变时,会发生 change 事件 });
click()触发、或将函数绑定到指定元素的 click 事件
$(selector).click() $(selector).click(function) $("button").click(function(){ $("p").slideToggle();//当点击元素时,会发生 click 事件 });
dblclick()触发、或将函数绑定到指定元素的 double click 事件
$(selector).dblclick() $(selector).dblclick(function) $("button").dblclick(function(){ $("p").slideToggle();//当双击元素时,会发生 dblclick 事件 });
delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器
$(selector).delegate(childSelector,event,function) $("div").delegate("button","click",function(){ $("p").slideToggle();//为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数// });
die()移除所有通过 live() 函数添加的事件处理程序。
$(selector).die(event,function) $("p").die();//die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序
error()触发、或将函数绑定到指定元素的 error 事件
$(selector).error() $(selector).error(function) $("img").error(function(){ $("img").replaceWith(" Missing image!//当元素遇到错误(没有正确载入)时,发生 error 事件。触发 error 事件,或规定当发生 error 事件时运行的函数 "); });
event.isDefaultPrevented()返回 event 对象上是否调用了 event.preventDefault()。
event.isDefaultPrevented() $("a").click(function(event){ event.preventDefault();//isDefaultPrevented() 方法返回指定的 event 对象上是否调用了 preventDefault() 方法 alert("Default prevented: " + event.isDefaultPrevented()); });
event.pageX相对于文档左边缘的鼠标位置。
event.pageX $(document).mousemove(function(e){ $("span").text("X: " + e.pageX + ", Y: " + e.pageY);//pageX() 属性是鼠标指针的位置,相对于文档的左边缘 });
event.pageY相对于文档上边缘的鼠标位置。同上
event.preventDefault()阻止事件的默认动作。
event.preventDefault() $("a").click(function(event){ event.preventDefault();//preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交) });
event.result包含由被指定事件触发的事件处理器返回的最后一个值。
event.result $("button").click(function(e) { $("p").html(e.result);//result 属性包含由被指定事件触发的事件处理器返回的最后一个值,除非这个值未定义 });
event.target触发该事件的 DOM 元素。
event.target $("p, button, h1, h2").click(function(event){ $("div").html("Triggered by a " + event.target.nodeName + " element.");//target 属性规定哪个 DOM 元素触发了该事件 });
event.timeStamp该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.timeStamp $("button").click(function(event){ $("span")html(event.timeStamp);//timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数 });
event.type描述事件的类型。
event.type $("p").bind('click dblclick mouseover mouseout',function(event){ $("div").html("Event: " + event.type);//属性描述触发哪种事件类型 });
event.which指示按了哪个键或按钮。
event.which $("input").keydown(function(event){ $("div").html("Key: " + event.which);//which 属性指示按了哪个键或按钮 });
focus()触发、或将函数绑定到指定元素的 focus 事件
$(selector).focus() $(selector).focus(function) $("input").focus(function(){ $("input").css("background-color","#FFFFCC");//当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。发生 focus 事件 });
keydown()触发、或将函数绑定到指定元素的 key down 事件
$(selector).keydown() $(selector).keydown(function) $("input").keydown(function(){ $("input").css("background-color","#FFFFCC");//当按钮被按下时,发生 keydown 事件 });
keypress()触发、或将函数绑定到指定元素的 key press 事件
$(selector).keypress() $(selector).keypress(function) $("input").keypress(function(){ $("span").text(i+=1);/*keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。 不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件*/ });
keyup()触发、或将函数绑定到指定元素的 key up 事件
$(selector).keyup() $(selector).keyup(function) $("input").keyup(function(){ $("input").css("background-color","#D6D6FF"); });//当按钮被松开时,发生 keyup 事件
live()为当前或未来的匹配元素添加一个或多个事件处理器
$(selector).live(event,function) $("button").live("click",function(){ $("p").slideToggle();/*live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)*/ });
load()触发、或将函数绑定到指定元素的 load 事件
$(selector).load(function) $("img").load(function(){ $("div").text("Image loaded");/*当指定的元素(及子元素)已加载时,会发生 load() 事件。 该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)。 根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。*/ });
mousedown()触发、或将函数绑定到指定元素的 mouse down 事件
$(selector).mousedown() $(selector).mousedown(function) $("button").mousedown(function(){ $("p").slideToggle();//与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生 });
mouseenter()触发、或将函数绑定到指定元素的 mouse enter 事件
$(selector).mouseenter() $(selector).mouseenter(function) $("p").mouseenter(function(){ $("p").css("background-color","yellow"); });/*当鼠标指针穿过元素时,会发生 mouseenter 事件。 该事件大多数时候会与 mouseleave 事件一起使用。与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。*/
mouseleave()触发、或将函数绑定到指定元素的 mouse leave 事件
$(selector).mouseleave() $(selector).mouseleave(function) $("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4"); });/*当鼠标指针离开元素时,会发生 mouseleave 事件。 该事件大多数时候会与 mouseenter 事件一起使用。与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件*/
mousemove()触发、或将函数绑定到指定元素的 mouse move 事件
$(selector).mousemove() $(selector).mousemove(function) $(document).mousemove(function(e){ $("span").text(e.pageX + ", " + e.pageY); });//用户把鼠标移动一个像素,就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。
mouseout()触发、或将函数绑定到指定元素的 mouse out 事件
$(selector).mouseout() $(selector).mouseout(function) $("p").mouseout(function(){ $("p").css("background-color","#E9E9E4"); });//当鼠标指针从元素上移开时,发生 mouseout 事件
mouseover()触发、或将函数绑定到指定元素的 mouse over 事件
$(selector).mouseover() $(selector).mouseover(function) $("p").mouseover(function(){ $("p").css("background-color","yellow"); });//当鼠标指针位于元素上方时,会发生 mouseover 事件.该事件大多数时候会与 mouseout 事件一起使用
mouseup()触发、或将函数绑定到指定元素的 mouse up 事件
$(selector).mouseup() $(selector).mouseup(function) $("button").mouseup(function(){ $("p").slideToggle();//当在元素上放松鼠标按钮时,会发生 mouseup 事件 });
one()向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
$(selector).one(event,function) $("p").one("click",function(){ $(this).animate({fontSize:"+=6px"}); });//one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。当使用 one() 方法时,每个元素只能运行一次事件处理器函数
ready()文档就绪事件(当 HTML 文档就绪可用时)
$(document).ready(function) $().ready(function) $(function) $(document).ready(function(){ $(".btn1").click(function(){ $("p").slideToggle();//当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件 }); });
resize()触发、或将函数绑定到指定元素的 resize 事件
$(selector).resize() $(selector).resize(function) $(window).resize(function() { $('span').text(x+=1);//当调整浏览器窗口的大小时,发生 resize 事件 });
scroll()触发、或将函数绑定到指定元素的 scroll 事件
$(selector).scroll() $(selector).scroll(function) $("div").scroll(function() { $("span").text(x+=1);//当用户滚动指定的元素时,会发生 scroll 事件。 scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口) });
select()触发、或将函数绑定到指定元素的 select 事件
$(selector).select() $(selector).select(function) $("input").select(function(){ $("input").after(" Text marked!"); });//当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件
submit()触发、或将函数绑定到指定元素的 submit 事件
$(selector).submit() $(selector).submit(function) $("form").submit(function(e){ alert("Submitted");//当提交表单时,会发生 submit 事件。该事件只适用于表单元素 });
toggle()绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。
$(selector).toggle(function1(),function2(),functionN(),...) $("p").toggle( function(){ $("body").css("background-color","green");}, function(){ $("body").css("background-color","red");}, function(){ $("body").css("background-color","yellow");} );//toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件 $(selector).toggle(switch)//switch必需。布尔值,规定 toggle() 是否应只显示或只隐藏所有被选元素
trigger()所有匹配元素的指定事件
$(selector).trigger(event) $("button").click(function(){ $("input").trigger("select"); });//规定被选元素要触发的事件
triggerHandler()第一个被匹配元素的指定事件
$(selector).triggerHandler(event) $("button").click(function(){ $("input").triggerHandler("select"); });//triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素
unbind()从匹配元素移除一个被添加的事件处理器
$(selector).unbind(event,function) $("button").click(function(){ $("p").unbind(); });/*unbind() 方法移除被选元素的事件处理程序。 该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。 ubind() 适用于任何通过 jQuery 附加的事件处理程序*/
undelegate()从匹配元素移除一个被添加的事件处理器,现在或将来
$(selector).undelegate(selector,event,function) $("body").undelegate()//undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序
unload()触发、或将函数绑定到指定元素的 unload 事件
event.unload(function) $(window).unload(function(){ alert("Goodbye!"); });/*当用户离开页面时,会发生 unload 事件。 具体来说,当发生以下情况时,会发出 unload 事件: 点击某个离开页面的链接 在地址栏中键入了新的 URL 使用前进或后退按钮 关闭浏览器 重新加载页面 unload() 方法将事件处理程序绑定到 unload 事件。 unload() 方法只应用于 window 对象*/