jquery事件
2014-04-30 14:53
246 查看
一、页面载入
1、ready(fn)
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。请确保在<body> 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
返回值 jQuery
参数
fn (Function) : 要在DOM就绪时执行的函数
示例：
//在DOM加载完成时运行的代码,可以这样写:
$(document).ready(function() {
// 在这里写你的代码
});
//使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何。
jQuery(function($) {
// 你可以在这里继续使用$作为别名
});
二、事件处理
1、bind(type,[data],fn)
为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。
这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。多数情况下，可以把事件处理器函数定义为匿名函数（见示例一）。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理器函数则作为第三个参数），见示例二。
返回值 jQuery
参数
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数
示例：
//1 当每个文本被点击的时候，弹出其文本值
$("input").bind("click", function() {
alert($(this).val());
});
//2 可以在事件处理之前传递一些附加的数据。
function handler(event) {
alert(event.data.foo);
}
$("div").bind("click", { foo: "bar" }, handler)
//3 通过返回false来取消默认的行为并阻止事件起泡。
$("form").bind("submit", function() { return false; })
//4 通过使用 preventDefault() 方法只取消默认的行为。
$("form").bind("submit", function(event) {
event.preventDefault();
});
//5 通过使用 stopPropagation() 方法只阻止一个事件起泡。
$("form").bind("submit", function(event) {
event.stopPropagation();
});
2、one(type,[data],fn)
为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。
多数情况下，可以把事件处理函数定义为匿名函数（见示例一）。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理函数则作为第三个参数），见示例二。
返回值 jQuery
参数
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数
示例：
//1 当每个文本被点击的时候，弹出其文本值
$("input").one("click", function() {
alert($(this).val());
});
//2 可以在事件处理之前传递一些附加的数据。
function handler(event) {
alert(event.data.foo);
}
$("div").one("click", { foo: "bar" }, handler)
3、trigger(type,[data])
在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。你也可以触发由bind()注册的自定义事件而不限于浏览器默认事件。事件处理函数会收到一个修复的(规范化的)事件对象，但这个对象没有特定浏览器才有的属性，比如keyCode。jQuery也支持
命名空间事件。这允许你触发或者解除绑定一组特定的事件处理函数，而无需一一个指定。你可以在事件类型后面加上感叹号 ! 来只触发那些没有命名空间的事件处理函数。
jQuery 1.3中新增：
所有触发的事件现在会冒泡到DOM树上了。举例来说，如果你在一个段落p上触发一个事件，他首先会在这个元素上触发，其次到父元素，在到父元素的父元素，直到触发到document对象。这个事件对象有一个 .target 属性指向最开始触发这个事件的元素。你可以用 stopPropagation() 来阻止事件冒泡，或者在事件处理函数中返回false即可。事件对象构造器现在已经公开，并且你可以自行创建一个事件对象。这个事件对象可以直接传递给trigger所触发的事件处理函数。事件对象的完整属性列表可以在 jQuery.Event
的文档里找到。
你可以有三种方式指定事件类型：
* 你可以传递字符串型的事件名称(type参数)。
* 你可以使用jQuery.Event对象。可以将数据放进这个对象，并且这个对象可以被触发的事件处理函数获取到。
* 最后，你可以传递一个带有数据的字面量对象。他将被复制到真正的jQuery.Event对象上去。 注意在这种情况下你必须指定一个 type 属性。
返回值 jQuery
参数
type (String,Event,Object) : 一个事件对象或者要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例：
//提交第一个表单，但不用submit()
$("form:first").trigger("submit")
//给一个事件传递参数
$("p").click( function (event, a, b) {
// 一个普通的点击事件时，a和b是undefined类型
// 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);
//下面的代码可以显示一个"Hello World"
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
4、triggerHandler(type,[data])
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
这个方法的行为表现与trigger类似，但有以下三个主要区别：
* 第一，他不会触发浏览器默认事件。
* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。
返回值 jQuery
参数
type (String) : 要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例：
$("#old").click(function() {
$("input").trigger("focus");
});
$("#new").click(function() {
$("input").triggerHandler("focus");
});
$("input").focus(function() { $("<span>Focused!</span>").appendTo("body").fadeOut(1000); });
<div>
<input type="text" value="test" />
</div>
<button id="old">
.trigger("focus")</button>
<button id="new">
.triggerHandler("focus")</button><br />
<br />
<input type="text" value="To Be Focused" />
<div>
<p>
it is a jquery test
</p>
</div>
5、unbind([type],[data])
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
如果没有参数，则删除所有绑定的事件。你可以将你用bind()注册的自定义事件取消绑定。如果提供了事件类型作为参数，则只删除该类型的绑定事件。如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
返回值 jQuery
参数
type (String) : (可选) 事件类型
data (Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数
示例：
/*绑定*/
//1 当每个文本被点击的时候，弹出其文本值
$("input").bind("click", function() {
alert($(this).val());
});
//2 可以在事件处理之前传递一些附加的数据。
function handler(event) {
alert(event.data.foo);
}
$("div").bind("click", { foo: "bar" }, handler);
/*下面进行反绑定*/
//1 把所有文本所有事件取消绑定
$("input").unbind()
//2 将div的click事件取消绑定
$("div").unbind( "click" )
/*最后带参数的*/
var foo = function() {
// 处理某个事件的代码
alert("you clicked me");
};
$("p").bind("click", foo); //
当点击段落的时候会触发 foo
//// 删除特定函数的绑定，将函数作为第二个参数传入
$("p").unbind("click", foo); //
再也不会被触发 foo
三、事件委派
1、live(
type, fn )
jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件。
目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。 还不支持 blur, focus, mouseenter, mouseleave,
change, submit 等。
与bind()不同的是，live()一次只能绑定一个事件。这个方法跟传统的bind很像，区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说，如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时，对于这个新增加的li，其click事件依然可用。而无需重新给这种新增加的元素绑定事件。
.live()与流行的liveQuery插件很像，但有以下几个主要区别：
.live 目前只支持所有事件的子集，支持列表参考上面的说明。
.live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。
.live 没有"setup"和"cleanup"的过程。因为所有的事件是委派而不是直接绑定在元素上的。
要移除用live绑定的事件，请用die方法
返回值 jQuery
参数
type (String) : 一个或多个用空格分隔的事件名
fn (Function) : 欲绑定的事件处理函数
示例：
//点击生成的p依然据有同样的功能
$("p").live("click", function() {
$(this).after("<p>Another paragraph!</p>");
2、die(fn,fn)
jQuery 1.3新增。此方法与live正好完全相反。
如果不带参数，则所有绑定的live事件都会被移除。你可以解除用live注册的自定义事件。如果提供了type参数，那么会移除对应的live事件。如果也指定了第二个参数function,则只移出指定的事件处理函数。
返回值 jQuery
参数
type (String) : 可选，要解除绑定的live事件
fn (Function) : 可选，要解除绑定的特定处理函数
示例：
function aClick() {
alert("it is a jq test");
}
$(document).ready(function() {
$("#theone").live("click", aClick)
});
//给按钮解除click事件
$("#unbind").click(function() {
$("#theone").die("click", aClick)
});
<input type="text" id="theone" value="test" />
<input type="text" value="cancel theone event" id="unbind" />
<p>
it is a jquery test
</p>
四、事件切换
1、hover(over,out)
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
返回值 jQuery
参数
over (Function) : 鼠标移到元素上要触发的函数
out (Function) : 鼠标移出元素要触发的函数
示例：
//鼠标悬停的表格加上特定的类
$("td").hover(
function() {
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
}
);
<style type="text/css">
.hover
{
color:Red;
cursor:pointer;
}
</style>
<input type="text" id="theone" value="test" />
<input type="text" value="cancel theone event" id="unbind" />
<p>
it is a jquery test
</p>
<div>
<table>
<tr>
<td>aspx</td>
<td>ascx</td>
</tr>
</table>
2、toggle(fn,fn)
每次点击后依次调用函数。
如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。可以使用unbind("click")来删除。
返回值 jQuery
参数
fn (Function) : 第一数次点击时要执行的函数。
fn2 (Function) : 第二数次点击时要执行的函数。
fn3,fn4,... (Function) : 更多次点击时要执行的函数。
示例：
//对表格切换一个类(点击可以看到结果)
$("td").toggle(
function() {
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
}
);
五、事件
1、blur()
触发每一个匹配元素的blur事件。
这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的。
返回值 jQuery
示例：
$("p").blur(); //触发所有段落的blur事件
2、blur(fn)
在每一个匹配元素的blur事件中绑定一个处理函数。
blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的.
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的blur事件中绑定的处理函数。
示例：
$("p").blur( function () { alert("Hello World!"); } );
3、change()
触发每个匹配元素的change事件
这个函数会调用执行绑定到change事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发。
4、change(fn)
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的change事件中绑定的处理函数。
在每一个匹配元素的change事件中绑定一个处理函数。change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发。
示例：
//input内容改变 触发
$("input").change(function() { alert("Hello World!"); });
5、click()
触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。
返回值 jQuery
示例：
$(document).ready(function() {
$("input").click();
});
6、click(fn)
在每一个匹配元素的click事件中绑定一个处理函数。
注意，点击事件会在你的指针设备的按钮在元素上单击时触发。单击的定义是在屏幕的同一点触发了mousedown和mouseup.几个事件触发的顺序是：
mousedown-->mouseup-->click
返回值 jQuery
参数
fn (Function) : 绑定到click事件的函数
示例：
$("p").click( function () { $(this).hide(); }); //将页面内所有段落点击后隐藏
7、dblclick()
触发每一个匹配元素的dbclick事件。这个函数会调用执行绑定到dblclick事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。dblclick事件会在元素的同一点双击时触发。
8、dblclick(fn)
在每一个匹配元素的dblclick事件中绑定一个处理函数。在某个元素上双击的时候就会触发dblclick事件
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的dblclick事件中绑定的处理函数。
示例：
$("input").dblclick(function() { alert("you double clicked me!"); });
9、error()
这个函数会调用执行绑定到error事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
10、error(fn)
在每一个匹配元素的error事件中绑定一个处理函数。
对于error事件，没有一个公众的标准。在大多数浏览器中，当页面的JavaScript发生错误时，window对象会触发error事件;当图像的src属性无效时，比如文件不存在或者图像数据错误时，也会触发图像对象的error事件。如果异常是由window对象抛出，事件处理函数将会被传入三个参数：
(1). 描述事件的信息 ("varName is not defined", "missing operator in expression", 等等.),
(2). 包含错误的文档的完整URL
(3). 异常发生的行数
如果事件处理函数返回true，则表示事件已经被处理，浏览器将认为没有异常。
返回值 jQuery
参数
fn (Function) :在每一个匹配元素的error事件中绑定的处理函数。
示例：
//在服务器端记录javascript错误日志:
$(window).error(function(msg, url, line) {
jQuery.post("Error.aspx?action=jsErrorLog", { msg: msg, url: url, line: line });
});
//隐藏javascript错误:
$(window).error(function() {
return true;
});
//给IE的用户隐藏无效的图像:
$("img").error(function() {
$(this).hide();
});
11、focus()
触发每一个匹配元素的focus事件。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。
返回值 jQuery
示例：
$(document).ready(function(){
$("#txtUserName").focus();
});
12、focus(fn)
在每一个匹配元素的focus事件中绑定一个处理函数。focus事件可以通过鼠标点击或者键盘上的TAB导航触发
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的focus事件中绑定的处理函数。
示例：
//文本获取焦点，选择所有文本内容
$("#txtUserName").focus(function() {
$(this).select();
});
13、keydown()
触发每一个匹配元素的keydown事件。这个函数会调用执行绑定到keydown事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keydown事件会在键盘按下时触发。
14、keydown(fn)
在每一个匹配元素的keydown事件中绑定一个处理函数。
keydown事件会在键盘按下时触发。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的keydown事件中绑定的处理函数。
示例：
/*
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 更多详细信息:
//http://unixpapa.com/js/key.html
*/
$(document).keydown(function(event) {
switch (event.keyCode) {
case 13:
alert("you clicked enter!"); //Enter键
break;
}
});
15、keypress()
触发每一个匹配元素的keypress事件。这个函数会调用执行绑定到keydown事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keydown事件会在键盘按下时触发
16、keypress(fn)
在每一个匹配元素的keypress事件中绑定一个处理函数。
keypress事件会在敲击按键时触发。 敲击按键的定义为按下并抬起同一个按键。这几个事件发生的顺序是:
keydown-->keypress-->keyup
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的keypress事件中绑定的处理函数。
示例：
$(document).keypress(function(event)
{
switch (event.keyCode) {
case 13:
alert("you clicked enter!"); //Enter键
break;
}
});
17、keyup()
触发每一个匹配元素的keyup事件。这个函数会调用执行绑定到keyup事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keyup事件会在按键释放时触发。
18、keyup(fn)
在每一个匹配元素的keyup事件中绑定一个处理函数。keyup 事件会在键盘按下时触发。
示例：
$(document).keyup(function(event) {
switch (event.keyCode) {
case 13:
alert("you clicked enter!"); //Enter键
break;
}
});
19、load(fn)
在每一个匹配元素的load事件中绑定一个处理函数。如果绑定给window对象，则会在所有内容加载后触发，包括窗口、框架、对象和图像。如果是绑定元素，则在元素内容加载完后触发。
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的load事件中绑定的处理函数。
20、mousedown(fn)
在每一个匹配元素的mousedown事件中绑定一个处理函数。mousedown事件在鼠标在元素上点击后会触发
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的mousedown事件中绑定的处理函数。
21、mousemove(fn)
在每一个匹配元素的mousemove事件中绑定一个处理函数。
mousemove 事件通过鼠标在元素上移动来触发。事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的mousemove事件中绑定的处理函数。
22、mouseout(fn)
在每一个匹配元素的mouseout事件中绑定一个处理函数。mouseout事件在鼠标从元素上离开后会触发。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的mouseout事件中绑定的处理函数。
23、mouseover(fn)
在每一个匹配元素的mouseover事件中绑定一个处理函数。mouseover事件会在鼠标移入对象时触发。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的mouseover事件中绑定的处理函数。
24、mouseup(fn)
在每一个匹配元素的mouseup事件中绑定一个处理函数。mouseup事件会在鼠标点击对象释放时。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的mouseup事件中绑定的处理函数。
25、resize(fn)
在每一个匹配元素的resize事件中绑定一个处理函数。当文档窗口改变大小时触发
返回值 jQuery
参数
fn (Function) :在每一个匹配元素的resize事件中绑定的处理函数。
示例：
$(window).resize(function() {
alert("Stop it!");
});
26、scroll(fn)
在每一个匹配元素的scroll事件中绑定一个处理函数。当滚动条发生变化时触发。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的resize事件中绑定的处理函数。
示例：
$(window).scroll(function() {
alert("scrolling now!");
});
27、select()
触发每一个匹配元素的select事件这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
返回值 jQuery
示例：
$("input").select();
28、select(fn)
在每一个匹配元素的select事件中绑定一个处理函数。当用户在文本框(包括input和textarea)中选中某段文本时会触发select事件。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的select事件中绑定的处理函数。
示例：
$("input").select(function() {
alert("you select the textbox context");
});
29、submit()
触发每一个匹配元素的submit事件。这个函数会调用执行绑定到submit事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
返回值 jQuery
示例：
$("form:first").submit(); //提交本页的第一个表单
30、submit(fn)
在每一个匹配元素的submit事件中绑定一个处理函数。submit事件将会在表单提交时触发。
返回值 jQuery
参数
fn (Function) :在每一个匹配元素的submit事件中绑定的处理函数.
示例：
//阻止表单提交
$("form").submit(function() {
return false;
});
31、unload(fn)
在每一个匹配元素的unload事件中绑定一个处理函数。。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的unload事件中绑定的处理函数。
示例：
$(window).unload(function() { alert("Byebye now!"); });
1、ready(fn)
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。请确保在<body> 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
返回值 jQuery
参数
fn (Function) : 要在DOM就绪时执行的函数
示例：
//在DOM加载完成时运行的代码,可以这样写:
$(document).ready(function() {
// 在这里写你的代码
});
//使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何。
jQuery(function($) {
// 你可以在这里继续使用$作为别名
});
二、事件处理
1、bind(type,[data],fn)
为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。
这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。多数情况下，可以把事件处理器函数定义为匿名函数（见示例一）。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理器函数则作为第三个参数），见示例二。
返回值 jQuery
参数
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数
示例：
//1 当每个文本被点击的时候，弹出其文本值
$("input").bind("click", function() {
alert($(this).val());
});
//2 可以在事件处理之前传递一些附加的数据。
function handler(event) {
alert(event.data.foo);
}
$("div").bind("click", { foo: "bar" }, handler)
//3 通过返回false来取消默认的行为并阻止事件起泡。
$("form").bind("submit", function() { return false; })
//4 通过使用 preventDefault() 方法只取消默认的行为。
$("form").bind("submit", function(event) {
event.preventDefault();
});
//5 通过使用 stopPropagation() 方法只阻止一个事件起泡。
$("form").bind("submit", function(event) {
event.stopPropagation();
});
2、one(type,[data],fn)
为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。
多数情况下，可以把事件处理函数定义为匿名函数（见示例一）。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理函数则作为第三个参数），见示例二。
返回值 jQuery
参数
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数
示例：
//1 当每个文本被点击的时候，弹出其文本值
$("input").one("click", function() {
alert($(this).val());
});
//2 可以在事件处理之前传递一些附加的数据。
function handler(event) {
alert(event.data.foo);
}
$("div").one("click", { foo: "bar" }, handler)
3、trigger(type,[data])
在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如，如果用trigger()触发一个'submit'，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。你也可以触发由bind()注册的自定义事件而不限于浏览器默认事件。事件处理函数会收到一个修复的(规范化的)事件对象，但这个对象没有特定浏览器才有的属性，比如keyCode。jQuery也支持
命名空间事件。这允许你触发或者解除绑定一组特定的事件处理函数，而无需一一个指定。你可以在事件类型后面加上感叹号 ! 来只触发那些没有命名空间的事件处理函数。
jQuery 1.3中新增：
所有触发的事件现在会冒泡到DOM树上了。举例来说，如果你在一个段落p上触发一个事件，他首先会在这个元素上触发，其次到父元素，在到父元素的父元素，直到触发到document对象。这个事件对象有一个 .target 属性指向最开始触发这个事件的元素。你可以用 stopPropagation() 来阻止事件冒泡，或者在事件处理函数中返回false即可。事件对象构造器现在已经公开，并且你可以自行创建一个事件对象。这个事件对象可以直接传递给trigger所触发的事件处理函数。事件对象的完整属性列表可以在 jQuery.Event
的文档里找到。
你可以有三种方式指定事件类型：
* 你可以传递字符串型的事件名称(type参数)。
* 你可以使用jQuery.Event对象。可以将数据放进这个对象，并且这个对象可以被触发的事件处理函数获取到。
* 最后，你可以传递一个带有数据的字面量对象。他将被复制到真正的jQuery.Event对象上去。 注意在这种情况下你必须指定一个 type 属性。
返回值 jQuery
参数
type (String,Event,Object) : 一个事件对象或者要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例：
//提交第一个表单，但不用submit()
$("form:first").trigger("submit")
//给一个事件传递参数
$("p").click( function (event, a, b) {
// 一个普通的点击事件时，a和b是undefined类型
// 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);
//下面的代码可以显示一个"Hello World"
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
4、triggerHandler(type,[data])
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
这个方法的行为表现与trigger类似，但有以下三个主要区别：
* 第一，他不会触发浏览器默认事件。
* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。
返回值 jQuery
参数
type (String) : 要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例：
$("#old").click(function() {
$("input").trigger("focus");
});
$("#new").click(function() {
$("input").triggerHandler("focus");
});
$("input").focus(function() { $("<span>Focused!</span>").appendTo("body").fadeOut(1000); });
<div>
<input type="text" value="test" />
</div>
<button id="old">
.trigger("focus")</button>
<button id="new">
.triggerHandler("focus")</button><br />
<br />
<input type="text" value="To Be Focused" />
<div>
<p>
it is a jquery test
</p>
</div>
5、unbind([type],[data])
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
如果没有参数，则删除所有绑定的事件。你可以将你用bind()注册的自定义事件取消绑定。如果提供了事件类型作为参数，则只删除该类型的绑定事件。如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
返回值 jQuery
参数
type (String) : (可选) 事件类型
data (Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数
示例：
/*绑定*/
//1 当每个文本被点击的时候，弹出其文本值
$("input").bind("click", function() {
alert($(this).val());
});
//2 可以在事件处理之前传递一些附加的数据。
function handler(event) {
alert(event.data.foo);
}
$("div").bind("click", { foo: "bar" }, handler);
/*下面进行反绑定*/
//1 把所有文本所有事件取消绑定
$("input").unbind()
//2 将div的click事件取消绑定
$("div").unbind( "click" )
/*最后带参数的*/
var foo = function() {
// 处理某个事件的代码
alert("you clicked me");
};
$("p").bind("click", foo); //
当点击段落的时候会触发 foo
//// 删除特定函数的绑定，将函数作为第二个参数传入
$("p").unbind("click", foo); //
再也不会被触发 foo
三、事件委派
1、live(
type, fn )
jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件。
目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。 还不支持 blur, focus, mouseenter, mouseleave,
change, submit 等。
与bind()不同的是，live()一次只能绑定一个事件。这个方法跟传统的bind很像，区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说，如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时，对于这个新增加的li，其click事件依然可用。而无需重新给这种新增加的元素绑定事件。
.live()与流行的liveQuery插件很像，但有以下几个主要区别：
.live 目前只支持所有事件的子集，支持列表参考上面的说明。
.live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。
.live 没有"setup"和"cleanup"的过程。因为所有的事件是委派而不是直接绑定在元素上的。
要移除用live绑定的事件，请用die方法
返回值 jQuery
参数
type (String) : 一个或多个用空格分隔的事件名
fn (Function) : 欲绑定的事件处理函数
示例：
//点击生成的p依然据有同样的功能
$("p").live("click", function() {
$(this).after("<p>Another paragraph!</p>");
2、die(fn,fn)
jQuery 1.3新增。此方法与live正好完全相反。
如果不带参数，则所有绑定的live事件都会被移除。你可以解除用live注册的自定义事件。如果提供了type参数，那么会移除对应的live事件。如果也指定了第二个参数function,则只移出指定的事件处理函数。
返回值 jQuery
参数
type (String) : 可选，要解除绑定的live事件
fn (Function) : 可选，要解除绑定的特定处理函数
示例：
function aClick() {
alert("it is a jq test");
}
$(document).ready(function() {
$("#theone").live("click", aClick)
});
//给按钮解除click事件
$("#unbind").click(function() {
$("#theone").die("click", aClick)
});
<input type="text" id="theone" value="test" />
<input type="text" value="cancel theone event" id="unbind" />
<p>
it is a jquery test
</p>
四、事件切换
1、hover(over,out)
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
返回值 jQuery
参数
over (Function) : 鼠标移到元素上要触发的函数
out (Function) : 鼠标移出元素要触发的函数
示例：
//鼠标悬停的表格加上特定的类
$("td").hover(
function() {
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
}
);
<style type="text/css">
.hover
{
color:Red;
cursor:pointer;
}
</style>
<input type="text" id="theone" value="test" />
<input type="text" value="cancel theone event" id="unbind" />
<p>
it is a jquery test
</p>
<div>
<table>
<tr>
<td>aspx</td>
<td>ascx</td>
</tr>
</table>
2、toggle(fn,fn)
每次点击后依次调用函数。
如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。可以使用unbind("click")来删除。
返回值 jQuery
参数
fn (Function) : 第一数次点击时要执行的函数。
fn2 (Function) : 第二数次点击时要执行的函数。
fn3,fn4,... (Function) : 更多次点击时要执行的函数。
示例：
//对表格切换一个类(点击可以看到结果)
$("td").toggle(
function() {
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
}
);
五、事件
1、blur()
触发每一个匹配元素的blur事件。
这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的。
返回值 jQuery
示例：
$("p").blur(); //触发所有段落的blur事件
2、blur(fn)
在每一个匹配元素的blur事件中绑定一个处理函数。
blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的.
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的blur事件中绑定的处理函数。
示例：
$("p").blur( function () { alert("Hello World!"); } );
3、change()
触发每个匹配元素的change事件
这个函数会调用执行绑定到change事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发。
4、change(fn)
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的change事件中绑定的处理函数。
在每一个匹配元素的change事件中绑定一个处理函数。change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发。
示例：
//input内容改变 触发
$("input").change(function() { alert("Hello World!"); });
5、click()
触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。
返回值 jQuery
示例：
$(document).ready(function() {
$("input").click();
});
6、click(fn)
在每一个匹配元素的click事件中绑定一个处理函数。
注意，点击事件会在你的指针设备的按钮在元素上单击时触发。单击的定义是在屏幕的同一点触发了mousedown和mouseup.几个事件触发的顺序是：
mousedown-->mouseup-->click
返回值 jQuery
参数
fn (Function) : 绑定到click事件的函数
示例：
$("p").click( function () { $(this).hide(); }); //将页面内所有段落点击后隐藏
7、dblclick()
触发每一个匹配元素的dbclick事件。这个函数会调用执行绑定到dblclick事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。dblclick事件会在元素的同一点双击时触发。
8、dblclick(fn)
在每一个匹配元素的dblclick事件中绑定一个处理函数。在某个元素上双击的时候就会触发dblclick事件
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的dblclick事件中绑定的处理函数。
示例：
$("input").dblclick(function() { alert("you double clicked me!"); });
9、error()
这个函数会调用执行绑定到error事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
10、error(fn)
在每一个匹配元素的error事件中绑定一个处理函数。
对于error事件，没有一个公众的标准。在大多数浏览器中，当页面的JavaScript发生错误时，window对象会触发error事件;当图像的src属性无效时，比如文件不存在或者图像数据错误时，也会触发图像对象的error事件。如果异常是由window对象抛出，事件处理函数将会被传入三个参数：
(1). 描述事件的信息 ("varName is not defined", "missing operator in expression", 等等.),
(2). 包含错误的文档的完整URL
(3). 异常发生的行数
如果事件处理函数返回true，则表示事件已经被处理，浏览器将认为没有异常。
返回值 jQuery
参数
fn (Function) :在每一个匹配元素的error事件中绑定的处理函数。
示例：
//在服务器端记录javascript错误日志:
$(window).error(function(msg, url, line) {
jQuery.post("Error.aspx?action=jsErrorLog", { msg: msg, url: url, line: line });
});
//隐藏javascript错误:
$(window).error(function() {
return true;
});
//给IE的用户隐藏无效的图像:
$("img").error(function() {
$(this).hide();
});
11、focus()
触发每一个匹配元素的focus事件。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。
返回值 jQuery
示例：
$(document).ready(function(){
$("#txtUserName").focus();
});
12、focus(fn)
在每一个匹配元素的focus事件中绑定一个处理函数。focus事件可以通过鼠标点击或者键盘上的TAB导航触发
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的focus事件中绑定的处理函数。
示例：
//文本获取焦点，选择所有文本内容
$("#txtUserName").focus(function() {
$(this).select();
});
13、keydown()
触发每一个匹配元素的keydown事件。这个函数会调用执行绑定到keydown事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keydown事件会在键盘按下时触发。
14、keydown(fn)
在每一个匹配元素的keydown事件中绑定一个处理函数。
keydown事件会在键盘按下时触发。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的keydown事件中绑定的处理函数。
示例：
/*
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 更多详细信息:
//http://unixpapa.com/js/key.html
*/
$(document).keydown(function(event) {
switch (event.keyCode) {
case 13:
alert("you clicked enter!"); //Enter键
break;
}
});
15、keypress()
触发每一个匹配元素的keypress事件。这个函数会调用执行绑定到keydown事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keydown事件会在键盘按下时触发
16、keypress(fn)
在每一个匹配元素的keypress事件中绑定一个处理函数。
keypress事件会在敲击按键时触发。 敲击按键的定义为按下并抬起同一个按键。这几个事件发生的顺序是:
keydown-->keypress-->keyup
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的keypress事件中绑定的处理函数。
示例：
$(document).keypress(function(event)
{
switch (event.keyCode) {
case 13:
alert("you clicked enter!"); //Enter键
break;
}
});
17、keyup()
触发每一个匹配元素的keyup事件。这个函数会调用执行绑定到keyup事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keyup事件会在按键释放时触发。
18、keyup(fn)
在每一个匹配元素的keyup事件中绑定一个处理函数。keyup 事件会在键盘按下时触发。
示例：
$(document).keyup(function(event) {
switch (event.keyCode) {
case 13:
alert("you clicked enter!"); //Enter键
break;
}
});
19、load(fn)
在每一个匹配元素的load事件中绑定一个处理函数。如果绑定给window对象，则会在所有内容加载后触发，包括窗口、框架、对象和图像。如果是绑定元素，则在元素内容加载完后触发。
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的load事件中绑定的处理函数。
20、mousedown(fn)
在每一个匹配元素的mousedown事件中绑定一个处理函数。mousedown事件在鼠标在元素上点击后会触发
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的mousedown事件中绑定的处理函数。
21、mousemove(fn)
在每一个匹配元素的mousemove事件中绑定一个处理函数。
mousemove 事件通过鼠标在元素上移动来触发。事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的mousemove事件中绑定的处理函数。
22、mouseout(fn)
在每一个匹配元素的mouseout事件中绑定一个处理函数。mouseout事件在鼠标从元素上离开后会触发。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的mouseout事件中绑定的处理函数。
23、mouseover(fn)
在每一个匹配元素的mouseover事件中绑定一个处理函数。mouseover事件会在鼠标移入对象时触发。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的mouseover事件中绑定的处理函数。
24、mouseup(fn)
在每一个匹配元素的mouseup事件中绑定一个处理函数。mouseup事件会在鼠标点击对象释放时。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的mouseup事件中绑定的处理函数。
25、resize(fn)
在每一个匹配元素的resize事件中绑定一个处理函数。当文档窗口改变大小时触发
返回值 jQuery
参数
fn (Function) :在每一个匹配元素的resize事件中绑定的处理函数。
示例：
$(window).resize(function() {
alert("Stop it!");
});
26、scroll(fn)
在每一个匹配元素的scroll事件中绑定一个处理函数。当滚动条发生变化时触发。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的resize事件中绑定的处理函数。
示例：
$(window).scroll(function() {
alert("scrolling now!");
});
27、select()
触发每一个匹配元素的select事件这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
返回值 jQuery
示例：
$("input").select();
28、select(fn)
在每一个匹配元素的select事件中绑定一个处理函数。当用户在文本框(包括input和textarea)中选中某段文本时会触发select事件。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的select事件中绑定的处理函数。
示例：
$("input").select(function() {
alert("you select the textbox context");
});
29、submit()
触发每一个匹配元素的submit事件。这个函数会调用执行绑定到submit事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
返回值 jQuery
示例：
$("form:first").submit(); //提交本页的第一个表单
30、submit(fn)
在每一个匹配元素的submit事件中绑定一个处理函数。submit事件将会在表单提交时触发。
返回值 jQuery
参数
fn (Function) :在每一个匹配元素的submit事件中绑定的处理函数.
示例：
//阻止表单提交
$("form").submit(function() {
return false;
});
31、unload(fn)
在每一个匹配元素的unload事件中绑定一个处理函数。。
返回值 jQuery
参数
fn (Function) : 在每一个匹配元素的unload事件中绑定的处理函数。
示例：
$(window).unload(function() { alert("Byebye now!"); });
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery入门——事件切换之hover()方法介绍
- jQuery-mobile 学习笔记之三（事件监听）
- 仿手机通讯录的jQuery滑动事件
- jquery 新建的元素事件绑定问题
- jQuery之remove和empty事件
- js 与 jquery 事件对象 比较(转)
- jquery事件与函数的使用介绍
- 零散的笔记：jquery中的事件
- jquery文本框改变事件
- jquery学习手记（9）事件基础知识
- Jquery 日记一:bing live delegate三个绑定事件操作的区别 ！
- jQuery Direct and delegated events 直接事件与委托事件
- jQuery事件总结
- jquery bind click mouseout hover mouseover事件
- jQuery使用on()绑定动态生成元素的事件无效的问题
- jquery Flexigrid只选择一行,增加双击事件，获取数据库ID
- jquery如何判断滚动条滚到页面底部并执行事件
- jquery绑定事件
- jQuery的事件模式(翻译jQuery in action第四章)
- jquery一些事件处理