jQuery事件总结

一、页面载入


示例：
 $(document).ready(function(){
  // 在这里写你的代码...
}); 


jQuery(function($) {
  // 你可以在这里继续使用$作为别名...
}); 




二、事件处理


1、bind(type,[data],fn)
参数：
type(String) : 事件类型
data(Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn(Function) : 绑定到每个匹配元素的事件上面的处理函数
示例：
当每个段落被点击的时候，弹出其文本。
$("p").bind("click", function(){
  alert( $(this).text() );
}); 
你可以在事件处理之前传递一些附加的数据。
function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler) 


2、one(type,[data],fn)
参数：
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function) : 绑定到每个匹配元素的事件上面的处理函数
示例：
当所有段落被第一次点击的时候，显示所有其文本。
$("p").one("click", function(){
  alert( $(this).text() );
}); 


3、trigger(type,[data])
参数：
type (String) : 要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例：
给一个事件传递参数
$("p").click( function (event, a, b) {
  // 一个普通的点击事件时，a和b是undefined类型
  // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]); 


4、triggerHandler(type,[data])
参数：
type (String) : 要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例：
如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作。
HTML 代码:
<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="To Be Focused"/>
jQuery 代码:
$("#old").click(function(){
  $("input").trigger("focus");
});
$("#new").click(function(){
  $("input").triggerHandler("focus");
});
$("input").focus(function(){   $("<span>Focused!</span>").appendTo("body").fadeOut(1000); });  


5、unbind([type],[data])
参数：
type (String) : (可选) 事件类型
data (Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数
示例：
将段落的click事件取消绑定 
$("p").unbind( "click" )
删除特定函数的绑定，将函数作为第二个参数传入 
var foo = function () {
  // 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo 
$("p").unbind("click", foo); // ... 再也不会被触发 foo 




三、交互处理


1、hover(over,out)
参数：
over (Function) : 鼠标移到元素上要触发的函数
out (Function) : 鼠标移出元素要触发的函数
示例：
鼠标悬停的表格加上特定的类 
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
); 


2、toggle(fn,fn)
参数：
fn (Function) : 第一数次点击时要执行的函数。
fn2 (Function) : 第二数次点击时要执行的函数。
fn3,fn4,... (Function) : 更多次点击时要执行的函数。
示例：
对表格的切换一个类 
$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
); 




四、事件


1、blur(fn)
在每一个匹配元素的blur事件中绑定一个处理函数。
blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
示例：
任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。 
$("p").blur( function () { alert("Hello World!"); } );


2、change(fn)
在每一个匹配元素的change事件中绑定一个处理函数。
change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发。
示例：
给所有的文本框增加输入验证 
$("input[type='text']").change( function() {
  // 这里可以写些验证代码
});


3、click(fn)
在每一个匹配元素的click事件中绑定一个处理函数。
点击事件会在你的指针设备的按钮在元素上单击时触发。单击的定义是在屏幕的同一点触发了mousedown和mouseup.几个事件触发的顺序是：
mousedown
mouseup
click
示例：
将页面内所有段落点击后隐藏。
$("p").click( function () { $(this).hide(); });


4、dblclick(fn)
在每一个匹配元素的dblclick事件中绑定一个处理函数。
的那个在某个元素上双击的时候就会触发dblclick事件
示例：
给页面上每个段落的双击事件绑上 "Hello World!" 警告框 
$("p").dblclick( function () { alert("Hello World!"); });


5、error(fn)
示例：
隐藏JavaScript错误: 
$(window).error(function(){
  return true;
}); 
给你IE的用户隐藏无效的图像: 
$("img").error(function(){
  $(this).hide();
}); 


6、focus(fn)
在每一个匹配元素的focus事件中绑定一个处理函数。
focus事件可以通过鼠标点击或者键盘上的TAB导航触发
示例：
使人无法使用文本框: 
$("input[type=text]").focus(function(){
  this.blur();
}); 


7、keydown(fn)
在每一个匹配元素的keydown事件中绑定一个处理函数。
keydown事件会在键盘按下时触发。
示例：
在页面内对键盘按键做出回应，可以使用如下代码: 
$(window).keydown(function(event){
  switch(event.keyCode) {
    // ...
    // 不同的按键可以做不同的事情
    // 不同的浏览器的keycode不同
    // 更多详细信息: 
    http://unixpapa.com/js/key.html
    // ...
    }
}); 


8、keypress(fn)
在每一个匹配元素的keypress事件中绑定一个处理函数。
keypress事件会在敲击按键时触发。 敲击按键的定义为按下并抬起同一个按键。这几个事件发生的顺序是:
keydown
keyup
keypress


9、keyup(fn)
在每一个匹配元素的keyup事件中绑定一个处理函数。
keyup事件会在按键释放时触发。


10、load(fn)
在每一个匹配元素的load事件中绑定一个处理函数。
如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。


11、mousedown(fn)
在每一个匹配元素的mousedown事件中绑定一个处理函数。
mousedown事件在鼠标在元素上点击后会触发


12、mousemove(fn)
在每一个匹配元素的mousemove事件中绑定一个处理函数。
mousemove 事件通过鼠标在元素上移动来触发。事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标


13、mouseout(fn)
在每一个匹配元素的mouseout事件中绑定一个处理函数。
mouseout事件在鼠标从元素上离开后会触发


14、mouseover(fn)
在每一个匹配元素的mouseover事件中绑定一个处理函数。
mouseover事件会在鼠标移入对象时触发


15、mouseup(fn)
在每一个匹配元素的mouseup事件中绑定一个处理函数。
mouseup事件会在鼠标点击对象释放时


16、resize(fn)
在每一个匹配元素的resize事件中绑定一个处理函数。
当文档窗口改变大小时触发
示例：
让人每次改变页面窗口的大小时很郁闷的方法: 
$(document).resize(function(){
  alert("Stop it!");
}); 


17、scroll(fn)
在每一个匹配元素的scroll事件中绑定一个处理函数。
当滚动条发生变化时触发
示例：
当页面滚动条变化时，执行的函数: 
$(window).scroll( function() { 
/* ...do something... */
 } );


18、select(fn)
在每一个匹配元素的select事件中绑定一个处理函数。
当用户在文本框(包括input和textarea)中选中某段文本时会触发select事件。
示例：
当文本框中文本被选中时执行的函数: 
$(document).select( function () { 
/* ...do something... */ 
} );


19、submit(fn)
在每一个匹配元素的submit事件中绑定一个处理函数。
submit事件将会在表单提交时触发
示例：
如果你要阻止表单提交:  
$("form").submit( function () {
  return false;
} );  


20、unload(fn)
在每一个匹配元素的unload事件中绑定一个处理函数。
示例：
页面卸载的时候弹出一个警告框: 
$(document).unload( function () { 
alert("Bye now!"); 
} ); 

点击下载jquery中文手册