一、基礎(chǔ)事件

1、綁定事件

bind();
參數(shù)一：要綁定事件函數(shù)的事件名。
參數(shù)二：要綁定的事件函數(shù)（事件函數(shù)名），如果將來有可能刪除該綁定的函數(shù)，則必須傳函數(shù)名。
bind()方法可以通過鏈式調(diào)用的形式連續(xù)多次調(diào)用，進而個同一標簽的同一事件（不同事件）添加不同的事件函數(shù)。
on('事件名',fn);
one('事件名',fn);該方法綁定的事件函數(shù)只能被觸發(fā)一次。

2、解除事件

unbind();
參數(shù)一：要解綁事件函數(shù)的事件名（如果只傳這一個參數(shù)，則該事件名中綁定的函數(shù)全部解除）。
參數(shù)二：要解除綁定的事件函數(shù)名。
off();

注意：bind()和unbind()在3.0后已經(jīng)被on()和off()取代。

$('button').bind('click',hello);
$('button').unbind('click',hello);
                
3.0后提倡的方法：on off
$('button').on('click',hello).on('click',bye);
解除事件綁定，解除很多方法都可以用這個方法
$('button').off('click');

one()方法綁定的事件函數(shù)只能被觸發(fā)一次
$('button').one('click',hello);
 $('button').off('click');

3、簡寫事件

事件簡寫本質(zhì)就是簡化給標簽添加事件函數(shù)的操作，標準的添加事件方法：on/bind/one,類似于js的DOM2級添加事件函數(shù)操作；事件簡寫類似于DOM0級的事件綁定操作。

jq事件簡寫綁定事件函數(shù)的技術(shù)實現(xiàn)原理：
1、jq給每一個事件名定義了同名的函數(shù)，用戶調(diào)用的事件簡寫形式，就是在調(diào)用這個和事件名同名的函數(shù)
2、同名函數(shù)內(nèi)部實現(xiàn)原理：當用戶調(diào)用了該函數(shù)，首先獲取該函數(shù)的函數(shù)名（函數(shù)名代表的是事件名），在函數(shù)內(nèi)部通過on把通過參數(shù)傳進來的函數(shù)綁定在函數(shù)名對應(yīng)的事件上。

blur(fn)：失去焦點時觸發(fā)該方法。
focus(fn)：當鼠標或tab按鈕讓元素獲得焦點時，觸發(fā)該函數(shù)。
change(fn)：表單元素失去焦點（單選框、復(fù)選框、下拉菜單標簽被選中即可觸發(fā)，不需等待失去焦點），觸發(fā)該事件。
click(fn)：鼠標點擊時觸發(fā)該事件。
dbclick(fn)：雙擊元素時觸發(fā)該事件（注意：把click和dbclick用于同一個元素會產(chǎn)生問題）。
$(window).scroll(fn)：當頁面滾動時觸發(fā)事件。

function hello(){
                    alert('hello');
                }
$('button').click(hello);
                $('button').click(function(){
                    alert('bye')
                });
                $('button').off('click');

4、復(fù)合事件

hover(fn1,fn2):鼠標移入觸發(fā)fn1函數(shù)，鼠標移出觸發(fā)fn2函數(shù)。

$('div').hover(function(){
                    $(this).css('background','red')
                },function(){
                    $(this).css('background','green')
                });

復(fù)合事件：toggle().在1.8之前中，復(fù)合了奇、偶次點擊事件，在1.9之后的版本中toggle方法用于jq的動畫
toggle（）方法在1.8之前的版本中需要兩個函數(shù)類型作為參數(shù)，奇數(shù)次點擊觸發(fā)第一個函數(shù)，偶數(shù)次店家觸發(fā)第二個函數(shù)。

                $('#div').toggle(function(){
                    $(this).css('background','red')
                },function(){
                    $(this).css('background','green')
                });

二、事件對象

事件對象的獲?。涸谑录|發(fā)的函數(shù)中傳遞event參數(shù)。

事件對象的常用屬性：

event.type:事件類型
event.target:觸發(fā)事件的元素
e.currentTarget:事件綁定在哪個元素上
event.pageX:鼠標相對于文檔的左側(cè)坐標
event.pageY:鼠標相對于文檔的頂部坐標
e.preventDefault():取消標簽事件，如a標簽的頁面跳轉(zhuǎn)。
e.stopPropagation():阻止事件冒泡

$('#div').click(function(event) {
// 通過jq獲取到的事件對象和js獲取到的事件對象所具備的屬性基本一致。
console.log(event);

// 在jq事件體系中target屬性保存的是觸發(fā)該事件的標簽；currentTarget屬性保存的是響應(yīng)（觸發(fā)了事件函數(shù)）的標簽
console.log(event.target);
console.log(event.currentTarget);

// 在js事件體系中，target屬性保存的是觸發(fā)該事件的標簽，currentTarget屬性永遠為null
 });

事件的冒泡以及默認行為的處理

1、阻止事件冒泡
stopPropagation()方法
2、阻止默認行為
preventDefault()方法
注意：1、return false 在jQuery中是即阻止事件冒泡又阻止默認行為
　　　2、jQuery不支持事件捕獲

jQuery高級事件

window.onload = function () {
                /*
                var btnArr = document.querySelectorAll('.btn');

                for (var i = 0; i < btnArr.length; i ++) {
                    btnArr[i].num = i+1;
                    btnArr[i].onclick = function () {
                        alert('這是第' + this.num + '個按鈕');
                    }
                }
                */

               /*
                var btnArr = document.querySelectorAll('.btn');

               for (var i = 0; i < btnArr.length; i++) {
                   // var count = i + 1
                   btnArr[i].id =  i+1;
               }

               // 使用Js事件委托實現(xiàn)功能
               var divTag = document.querySelector('#div');
               divTag.onclick = function (ev) {
                   var e = event || ev;
                //    console.log(e.target.id);
                alert('當前是第' + e.target.id + '個按鈕')

               }

               */

            //   $('.btn').each(function(index, el) {
            //         this.id = index + 1;
            //   });

                // 通過jq實現(xiàn)事件委托
                /*
                $('#div').click(function(event) {
                    alert('當前觸發(fā)的是第' + event.target.id + '個按鈕')
                });
                */

        /*
                $('#div').on('click', function (event) {
                    // index()該方法是jq體系中的方法，通過該方法可以獲取到調(diào)用者在
他的兄弟標簽中的下標
                    var count = $(event.target).index() + 1;
                    alert('當前選擇的是第' + count + '個按鈕');
                });
*/

            // on()方法中的第二個參數(shù)可以傳遞選擇器
            // 在事件委托中，通過父標簽響應(yīng)子標簽的事件時，只有被選擇器匹配的
標簽觸發(fā)的事件，才能觸發(fā)執(zhí)行父標簽的事件函數(shù)；如果觸發(fā)事件的子標簽并沒
有被選擇器匹配，則父標簽的事件函數(shù)不會執(zhí)行。

            $('#div').on('click', '.btn', function(event) {
                alert('當前是第' + $(event.target).index()+'個按鈕');
            })

            }

解密jQuery事件核心：http://www.cnblogs.com/aaronjs/p/3444874.html