jQuery 参考手册 - 事件

$(selector).bind(event,function)

$(selector).bind({event:function, event:function, ...})

$("button").bind("click",function(){

  $("p").slideToggle();//为button绑定一个click事件和函数

});

$(selector).blur()

$(selector).blur(function)

$("input").blur(function(){

  $("input").css("background-color","#D6D6FF");//当元素失去焦点时,会触发事件

});

$(selector).change()

$(selector).change(function)

$(".field").change(function(){

  $(this).css("background-color","#FFFFCC");//当元素的值发生改变时，会发生 change 事件

});

$(selector).click()

$(selector).click(function)

$("button").click(function(){

  $("p").slideToggle();//当点击元素时，会发生 click 事件

});

$(selector).dblclick()

$(selector).dblclick(function)

$("button").dblclick(function(){

  $("p").slideToggle();//当双击元素时，会发生 dblclick 事件

});

$(selector).delegate(childSelector,event,function)

$("div").delegate("button","click",function(){

  $("p").slideToggle();//为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数//

});

$(selector).die(event,function)

$("p").die();//die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序

$(selector).error()

$(selector).error(function)

$("img").error(function(){

  $("img").replaceWith("

Missing image!//当元素遇到错误（没有正确载入）时，发生 error 事件。触发 error 事件，或规定当发生 error 事件时运行的函数

");

});

event.isDefaultPrevented()

$("a").click(function(event){

   event.preventDefault();//isDefaultPrevented() 方法返回指定的 event 对象上是否调用了 preventDefault() 方法

  alert("Default prevented: " + event.isDefaultPrevented());

});

event.pageX

$(document).mousemove(function(e){

  $("span").text("X: " + e.pageX + ", Y: " + e.pageY);//pageX() 属性是鼠标指针的位置，相对于文档的左边缘

});

event.preventDefault()

$("a").click(function(event){

  event.preventDefault();//preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）

});

event.result

$("button").click(function(e) {

  $("p").html(e.result);//result 属性包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义

});

event.target

$("p, button, h1, h2").click(function(event){

  $("div").html("Triggered by a " + event.target.nodeName + " element.");//target 属性规定哪个 DOM 元素触发了该事件

});

event.timeStamp

$("button").click(function(event){

  $("span")html(event.timeStamp);//timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数

});

event.type

$("p").bind('click dblclick mouseover mouseout',function(event){

  $("div").html("Event: " + event.type);//属性描述触发哪种事件类型

});

event.which

$("input").keydown(function(event){

  $("div").html("Key: " + event.which);//which 属性指示按了哪个键或按钮

});

$(selector).focus()

$(selector).focus(function)

$("input").focus(function(){

  $("input").css("background-color","#FFFFCC");//当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。发生 focus 事件

});

$(selector).keydown()

$(selector).keydown(function)

$("input").keydown(function(){

  $("input").css("background-color","#FFFFCC");//当按钮被按下时，发生 keydown 事件

});

$(selector).keypress()

$(selector).keypress(function)

$("input").keypress(function(){

  $("span").text(i+=1);/*keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。

不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件*/

});

$(selector).keyup()

$(selector).keyup(function)

$("input").keyup(function(){

  $("input").css("background-color","#D6D6FF");

});//当按钮被松开时，发生 keyup 事件

$(selector).live(event,function)

$("button").live("click",function(){

  $("p").slideToggle();/*live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）*/

});

$(selector).load(function)

$("img").load(function(){

  $("div").text("Image loaded");/*当指定的元素（及子元素）已加载时，会发生 load() 事件。

该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）。

根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。*/

});

$(selector).mousedown()

$(selector).mousedown(function)

$("button").mousedown(function(){

  $("p").slideToggle();//与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生

});

$(selector).mouseenter()

$(selector).mouseenter(function)

$("p").mouseenter(function(){

  $("p").css("background-color","yellow");

});/*当鼠标指针穿过元素时，会发生 mouseenter 事件。

该事件大多数时候会与 mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。*/

$(selector).mouseleave()

$(selector).mouseleave(function)

$("p").mouseleave(function(){

  $("p").css("background-color","#E9E9E4");

});/*当鼠标指针离开元素时，会发生 mouseleave 事件。

该事件大多数时候会与 mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件*/

$(selector).mousemove()

$(selector).mousemove(function)

$(document).mousemove(function(e){

  $("span").text(e.pageX + ", " + e.pageY);

});//用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。

$(selector).mouseout()

$(selector).mouseout(function)

$("p").mouseout(function(){

  $("p").css("background-color","#E9E9E4");

});//当鼠标指针从元素上移开时，发生 mouseout 事件

$(selector).mouseover()

$(selector).mouseover(function)

$("p").mouseover(function(){

  $("p").css("background-color","yellow");

});//当鼠标指针位于元素上方时，会发生 mouseover 事件.该事件大多数时候会与 mouseout 事件一起使用

$(selector).mouseup()

$(selector).mouseup(function)

$("button").mouseup(function(){

  $("p").slideToggle();//当在元素上放松鼠标按钮时，会发生 mouseup 事件

});

$(selector).one(event,function)

$("p").one("click",function(){

  $(this).animate({fontSize:"+=6px"});

});//one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。当使用 one() 方法时，每个元素只能运行一次事件处理器函数

$(document).ready(function)

$().ready(function)

$(function)

$(document).ready(function(){

  $(".btn1").click(function(){

    $("p").slideToggle();//当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件

  });

});

$(selector).resize()

$(selector).resize(function)

$(window).resize(function() {

  $('span').text(x+=1);//当调整浏览器窗口的大小时，发生 resize 事件

});

$(selector).scroll()

$(selector).scroll(function)

$("div").scroll(function() {

  $("span").text(x+=1);//当用户滚动指定的元素时，会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）

});

$(selector).select()

$(selector).select(function)

$("input").select(function(){

  $("input").after(" Text marked!");

});//当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件

$(selector).submit()

$(selector).submit(function)

$("form").submit(function(e){

  alert("Submitted");//当提交表单时，会发生 submit 事件。该事件只适用于表单元素

});

$(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() 是否应只显示或只隐藏所有被选元素

$(selector).trigger(event)

$("button").click(function(){

  $("input").trigger("select");

});//规定被选元素要触发的事件

$(selector).triggerHandler(event)

$("button").click(function(){

  $("input").triggerHandler("select");

});//triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素

$(selector).unbind(event,function)

$("button").click(function(){

  $("p").unbind();

});/*unbind() 方法移除被选元素的事件处理程序。

该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。

ubind() 适用于任何通过 jQuery 附加的事件处理程序*/

$(selector).undelegate(selector,event,function)

$("body").undelegate()//undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序

event.unload(function)

$(window).unload(function(){

  alert("Goodbye!");

});/*当用户离开页面时，会发生 unload 事件。

具体来说，当发生以下情况时，会发出 unload 事件：

点击某个离开页面的链接

在地址栏中键入了新的 URL

使用前进或后退按钮

关闭浏览器

重新加载页面

unload() 方法将事件处理程序绑定到 unload 事件。

unload() 方法只应用于 window 对象*/