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 对象*/

 

转载于:https://www.cnblogs.com/sdgjytu/p/3539755.html