1 綁定事件
JavaScript常用的事件有：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、keypress、keyup、blur、focus、load、resize、scroll、error。
jQuery 通過.bind()方法來為元素綁定這些事件。可以傳遞三個參數：bind(type, [data], fn)，type 表示一個或多個類型的事件名字元串；[data]是可選的，作為event.data 屬性值傳遞一個額外的資料，這個資料是一個字元串、一個數字、一個數組或一個對象；fn 表示綁定到指定元素的處理函數。
//點選按鈕後執行匿名函數
$('input').bind('click', function () {
alert('彈窗！');
});
//執行普通函數時無須圓括号
$('input').bind('click', fn);
function fn() {
alert('處理函數！')
}
//可以同時綁定多個事件
$('input').bind('click mouseover', function () {
$('input').bind('mouseover mouseout', function () {
$('div').html(function (index, value) {
return value + '1';
});
//通過對象鍵值對綁定多個參數，事件名的引号可以省略
$('input').bind({
mouseover : function () {
alert('移入');
},
mouseout : function () {
alert('移出');
}
等效于
'mouseover' : function () {
'mouseout' : function () {
//删除事件
});
$('input').bind('click', fn1);
$('input').bind('click', fn2);
function fn1() {
alert('fn1');
function fn2() {
alert('fn2');
$('input').unbind(); //删除全部事件
$('input').unbind('click'); //隻删除click事件
$('input').unbind('click', fn2); //删除click事件綁定了fn2的
2 簡寫事件
<a href="http://s3.51cto.com/wyfs02/M00/12/53/wKioL1MDQCqSHig1AAYOFHdObE4872.jpg" target="_blank"></a>
樣例：
$('input').click(function () {
alert('單擊');
$('input').dblclick(function () {
alert('輕按兩下');
$('input').mousedown(function () {
alert('滑鼠左鍵按下');
$('input').mouseup(function () {
alert('滑鼠左鍵按下彈起');
$(window).unload(function () { //一般unload解除安裝頁面，新版浏覽器應該是不支援的
alert('1'); //一般用于清理工作。
$(window).resize(function () {
alert('文檔改變了');
$(window).scroll(function () {
alert('滾動條改變了');
$('input').select(function () {
alert('文本標明');
$('input').change(function () {
alert('文本改變');
//表單送出
$('form').submit(function () {
alert('表單送出！');
.mouseover()和.mouseout()表示滑鼠移入和移出的時候觸發；.mouseenter()和.mouseleave()表示滑鼠穿過和穿出的時候觸發。本質差別：.mouseenter()和.mouseleave()這組穿過子元素不會觸發，而.mouseover()和.mouseout()則會觸發。
//div中沒有子元素時，功能一樣
$('div').mouseover(function () {
$(this).css('background', 'red');
}).mouseout(function () {
$(this).css('background', 'green');
$('div').mouseenter(function () {
}).mouseleave(function () {
//有子節點時
$('div').mouseover(function() { //over和out會觸發子節點
$('strong').html(function (index, value) {
}).mouseout(function() {
$('div').mouseenter(function() { //enter和leave不會觸發子節點
}).mouseleave(function() {
.keydown()、.keyup()傳回的是鍵碼，而.keypress()傳回的是字元編碼。
$('input').keydown(function () {
alert('鍵盤'); //按下a傳回65
$('input').keyup(function () {
alert('鍵盤');
$('input').keydown(function (e) {
alert(e.keyCode); //按下a傳回97
$('input').keypress(function (e) {
alert(e.charCode);
.focus()和.blur()分别表示光标激活和丢失，事件觸發時機是目前元素。而.focusin()和.focusout()也表示光标激活和丢失，但事件觸發時機可以是子元素。
$('input').focus(function () { //focus和blur必須是目前元素才能激活
alert('光标激活');
$('div').focusin(function () { //focusin和focusout可以是子元素激活
3 複合事件
<a href="http://s3.51cto.com/wyfs02/M00/12/58/wKiom1MEMQHh3h2_AAEUSkuop3g277.jpg" target="_blank"></a>
.hover()方法是結合了.mouseenter()方法和.mouseleave()方法，并非.mouseenter()方法和.mouseleave()方法。
$('div').hover(function () {
}, function () {
//toggle()方法已被删除，實作類似toggle方法：
var flag = 1;
$('div').click(function () {
if (flag == 1) {
$(this).css('background', 'red');
flag = 2;
} else if (flag == 2) {
$(this).css('background', 'blue');
flag = 3;
} else if (flag == 3) {
$(this).css('background', 'green');
flag = 1;
本文轉自stock0991 51CTO部落格，原文連結：http://blog.51cto.com/qing0991/1360228，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)