bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
$(selector).bind({event:function, event:function, ...})
$(document).ready(function(){
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
});
unbind() 方法移除被选元素的事件处理程序。
该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
$(selector).unbind(event,function)
当元素获得焦点时发生 focus事件。
当元素失去焦点时发生 blur 事件。
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
$("#btn1").click(function(){
$("input").focus();
});
$("#btn2").click(function(){
$("input").blur();
});
});
当元素的值发生改变时,会发生 change 事件。
该事件仅适用于文本域(text field),以及 textarea 和 select 元素。
change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。
注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
$(document).ready(function(){
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
});
当点击元素时,会发生 click 事件。dblclick为双击事件
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
$("p").dblclick(function(){
$("button").click();
});
});
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。
$(selector).delegate(childSelector,event,data,function)
$(document).ready(function(){
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
});
当元素遇到错误(没有正确载入)时,发生 error 事件。
error() 方法触发 error 事件,或规定当发生 error 事件时运行的函数。
提示:该方法是 bind('error', handler) 的简写方式
$(document).ready(function(){
$("img").error(function(){
$("img").replaceWith("<p><b>图片未加载!</b></p>");
});
});
isDefaultPrevented() 方法返回指定的 event 对象上是否调用了 preventDefault() 方法。
preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
防止链接打开 URL,并声明来自 isDefaultPrevented() 的结果:
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
alert("Default prevented:" + event.isDefaultPrevented());
});
});
pageX() 属性是鼠标指针的位置,相对于文档的左边缘。
pageY() 属性是鼠标指针的位置,相对于文档的上边缘。
$(document).ready(function(){
$(document).mousemove(function(e){
$("span").text("X:" + e.pageX + ", Y: " + e.pageY);
});
});
result 属性包含由被指定事件触发的事件处理器返回的最后一个值,除非这个值未定义
$(document).ready(function(){
$("button").click(function(e) {
return ("最后一次点击的鼠标位置是: X" +e.pageX + ", Y" + e.pageY);
});
$("button").click(function(e) {
$("p").html(e.result);
});
});
target 属性规定哪个 DOM 元素触发了该事件。
$(document).ready(function(){
$("p, button, h1,h2").click(function(event){
$("div").html("点击事件由一个 " + event.target.nodeName + " 元素触发");
});
});
timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数
$(document).ready(function(){
$("button").click(function(e){
$("span").text(e.timeStamp);
});
});
type 属性描述触发哪种事件类型。
Event.type
which 属性指示按了哪个键或按钮
event.which。
当元素获得焦点时,发生 focus 事件。
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。
当按钮被按下时,发生 keydown 事件。
当按钮被松开时,发生 keyup 事件。
$("input").keydown(function(){
$("input").css("background-color","#FFFFCC");
});
keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。
不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件
i=0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i+=1);
});
});
当指定的元素(及子元素)已加载时,会发生 load() 事件。
该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)。
根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。
注释:还存在一个名为 load() 的 jQuery Ajax 方法,根据不同的参数而定。
$(document).ready(function(){
$("img").load(function(){
$("div").text("图像已加载");
});
});
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。
当鼠标指针穿过元素时,会发生 mouseenter 事件。
该事件大多数时候会与 mouseleave 事件一起使用。
当鼠标指针穿过元素时,会发生 mouseenter 事件
当鼠标指针位于元素上方时,会发生 mouseover 事件。
当鼠标指针从元素上移开时,发生 mouseout 事件。
当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。
与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件
当在元素上放松鼠标按钮时,会发生 mouseup 事件。
与 click 事件不同,mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。
mouseup() 方法触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函数。
one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。
当使用 one() 方法时,每个元素只能运行一次事件处理器函数。
$(document).ready(function(){
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
});
当调整浏览器窗口的大小时,发生 resize 事件。
resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数。
x=0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(x+=1);
});
});
当用户滚动指定的元素时,会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
x=0;
$(document).ready(function(){
$("div").scroll(function() {
$("span").text(x+=1);
});
});
当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件
$(document).ready(function(){
$("input").select(function(){
$("input").after(" Textmarked!");
});
});
当提交表单时,会发生 submit 事件。
该事件只适用于表单元素。
$("form").submit(function(e){
alert("Submitted");
});
当用户离开页面时,会发生 unload 事件。
具体来说,当发生以下情况时,会发出 unload 事件:
- 点击某个离开页面的链接
- 在地址栏中键入了新的 URL
- 使用前进或后退按钮
- 关闭浏览器
- 重新加载页面
toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。该方法也可用于切换被选元素的 hide() 与 show() 方法。如果规定了两个以上的函数,则 toggle() 方法将切换所有函数。
trigger() 方法触发被选元素的指定事件类型。
$(document).ready(function(){
$("input").select(function(){
$("input").after("文本被选中!");
});
$("button").click(function(){
$("input").trigger("select");
});
});
与 trigger() 方法不同,triggerHandler() 方法不会引起所发生事件的默认行为(文本不会被选中)
triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作,也不会产生事件冒泡。
triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素。