雖然利用原生的JavaScript事件能完成一些交互，但jQuery增加并擴(kuò)展了基本的事件處理機(jī)制。jQuery不僅提供了更加優(yōu)雅的事件處理語(yǔ)法，而且極大地增強(qiáng)了事件處理能力。

1、加載DOM

　　在JavaScript中，通常用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。下面來(lái)看看這兩種方法的不同之處：

　　1.1 執(zhí)行時(shí)機(jī)

　　window.onload方法是在網(wǎng)頁(yè)中所有的元素（包括元素的所有關(guān)聯(lián)文件）完全加載到瀏覽器后才執(zhí)行。而通過(guò)jQuery的$(document).ready()方法注冊(cè)的事件處理程序，在DOM完全就緒時(shí)就可以被調(diào)用。jQuery中提供了一個(gè)與window.onload相同的方法——load()方法。 

$(window).load(function(){ //編寫(xiě)代碼 })  等價(jià)于 window.onload = function() { //編寫(xiě)代碼 } .

　　1.2  多次使用

　　window.onload方法只能使用一次，再次使用將會(huì)被重寫(xiě)。而$(document).ready().可以被多次使用.

　　1.3  簡(jiǎn)寫(xiě)方式

 View Code

2、事件綁定

on() 方法在被選元素及子元素上添加一個(gè)或多個(gè)事件處理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來(lái)很多便利，我們推薦使用該方法，它簡(jiǎn)化了 jQuery 代碼庫(kù)。

注意：使用 on() 方法添加的事件處理程序適用于當(dāng)前及未來(lái)的元素（比如由腳本創(chuàng)建的新元素）。

提示：如需移除事件處理程序，請(qǐng)使用off()方法。

提示：如需添加只運(yùn)行一次的事件然后移除，請(qǐng)使用 one() 方法。

 語(yǔ)法：

$(selector).on(event,childSelector,data,function,map)

　　簡(jiǎn)寫(xiě)綁定事件：像click、mouseover、mouseout這類(lèi)常用事件，jQuery為此提供了一套簡(jiǎn)寫(xiě)方法。

1 $("#id").mouseover(function() {2       $(this).next().show();          
3 }).mouseout(function(){4       $(this).next().hide();5 });

3、合成事件

　　jQuery有兩個(gè)合成事件——hover()方法和toggle()方法，類(lèi)似前面講過(guò)的ready()方法，hover()方法和toggle方法都屬于jQuery自定義方法。

　　3.1  hover()方法

　　語(yǔ)法結(jié)構(gòu)： hover(enter, leave)； 

1 $(function(){2      $("#id").hover(functioin(){3            $(this).next().show();4      },function(){5            $(this).next().hide();6      });  
7 });

　　3.2  toggle()方法

　　語(yǔ)法結(jié)構(gòu)： toggle(fn1,fn2,...fnN); 

　　toggle()方法在jQuery中還有另外一個(gè)作用：切換元素的可見(jiàn)狀態(tài)。如果可見(jiàn)，單擊會(huì)隱藏；反之亦然。

1 $(function(){2      $("#id").toggle(function(){3            $(this).next().show();   //$(this).next().toggle();4      }，function(){5            $(this).next().hide();    //$(this).next().toggle();6      })7 })

4、事件冒泡

　　4.1  事件對(duì)象

　　由于IE-DOM和標(biāo)準(zhǔn)DOM實(shí)現(xiàn)事件對(duì)象的方法各不相同，導(dǎo)致在不同瀏覽器中獲取事件對(duì)象變得比較困難。針對(duì)這個(gè)問(wèn)題，jQuery進(jìn)行了封裝，從而使得任何瀏覽器都能輕松地獲取事件對(duì)象以及事件的一些屬性。

　　4.2  停止事件冒泡

1 $("#content").on("click",function(event){   // event： 事件對(duì)象2     var txt = $('#msg').html() +  "<p>外層div元素被單擊。</p>";3     $('#msg').html(txt);4     event.stopPropagation();    // 停止事件冒泡5 });

　　4.3  阻止默認(rèn)行為

　　網(wǎng)頁(yè)中的元素有自己的默認(rèn)行為，例如，單擊超鏈接會(huì)跳轉(zhuǎn)、單擊“提交”按鈕后表單會(huì)提交，有時(shí)需要阻止元素的默認(rèn)行為。

1 $("#submit").on("click",function(event){2     var username = $("#username").val();    // 獲取元素的值3     if(username == ""){    //提示信息4         $("#msg").html("<p>文本框不能為空</p>");   //提示信息5         event.preventDefault();      // 阻止默認(rèn)行為（表單提交）6     }7 });

附：并非所有主瀏覽器都支持事件捕獲，并且這個(gè)缺陷無(wú)法通過(guò)JavaScript彌補(bǔ)。jQuery不支持事件捕獲，如需要，請(qǐng)直接使用原生JavaScript。

5、事件對(duì)象的屬性

　　5.1  event.type

1 $("a").click(function(event){2     alert(event.type);  //獲取事件類(lèi)型3     return false;   // 阻止鏈接跳轉(zhuǎn)4 });

　　5.2  event.preventDefault()方法：阻止默認(rèn)行為

　　5.3  event.stopPropagation()方法：阻止事件的冒泡

　　5.4  event.target：獲取觸發(fā)事件的元素

　　5.5  event.relatedTarget：在標(biāo)準(zhǔn)DOM中，mouseover和mouseout所發(fā)生的元素可以通過(guò)event.target來(lái)訪(fǎng)問(wèn)，相關(guān)元素用event.relatedTarget來(lái)訪(fǎng)問(wèn)。event.relatedTarget在mouseover中相當(dāng)于IE的event.fromElement,在mouseout中相當(dāng)于IE的event.toElement，jQuery對(duì)其進(jìn)行了封裝，使之能兼容任何瀏覽器。

　　5.6  event.pageX和event.pageY：相對(duì)于頁(yè)面文檔的坐標(biāo)

　　5.7  event.which：該方法作用是鼠標(biāo)點(diǎn)擊事件中獲取鼠標(biāo)的左、中、右鍵，返回?cái)?shù)值。

　　5.8  event.metaKey：jQuery也封裝event.metaKey屬性，返回布爾值。

6、移除事件

　　在綁定事件的過(guò)程中，不僅可以為同一個(gè)元素綁定多個(gè)事件，也可以為多個(gè)元素綁定同一個(gè)事件：

1 /* 依次彈出 */2 $("p").on("click",function(){3     alert(1);4   }).on("click",function(){5     alert(2);6   }).on("click",function(){7     alert(3);8   });

　　移除按鈕元素上以前注冊(cè)的事件 —— off()方法

off() 方法通常用于移除通過(guò)on()方法添加的事件處理程序。

自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。該方法給 API 帶來(lái)很多便利，我們推薦使用該方法，它簡(jiǎn)化了 jQuery 代碼庫(kù)。

注意：如需移除指定的事件處理程序，當(dāng)事件處理程序被添加時(shí)，選擇器字符串必須匹配 on() 方法傳遞的參數(shù)。

提示：如需添加只運(yùn)行一次的事件然后移除，請(qǐng)使用 one() 方法。

語(yǔ)法:

$(selector).off(event,selector,function(eventObj),map)

7、模擬事件

　　7.1  常用模擬

1 $("#btn").trigger("click");    //頁(yè)面加載完畢后，立即執(zhí)行點(diǎn)擊事件2 3 $("#btn").click();   //和上面效果一樣

　　7.2  觸發(fā)自定義事件

　　trigger()方法不僅能觸發(fā)瀏覽器支持的具有相同名稱(chēng)的事件，也可以觸發(fā)自定義名稱(chēng)事件。

1 $('#btn').on("myClick",function(){    //定義一個(gè)自定義事件2     alert("自定義事件執(zhí)行");3 });4 5 $('#btn').trigger("myClick");   // 觸發(fā)自定義事件

　　7.3  傳遞數(shù)據(jù)

　　trigger(type,[data])方法有倆個(gè)參數(shù)，第一個(gè)參數(shù)是要觸發(fā)的事件類(lèi)型，第二個(gè)是要傳遞給事件處理函數(shù)的附加數(shù)據(jù)，以數(shù)組形式傳遞。通常可以通過(guò)傳遞一個(gè)參數(shù)給回調(diào)數(shù)來(lái)區(qū)別這次事件是代碼觸發(fā)還是用戶(hù)觸發(fā)。

1 $('#btn').on("myClick",fucntion(event,message1,message2){   //獲取數(shù)據(jù)2     $('#test').append("<p>"+message1+message2+"</p>");3 });4 5 $('#btn').trigger("myClick",["我的自定義","事件"]);  //傳遞倆個(gè)數(shù)據(jù)

　　7.4  執(zhí)行默認(rèn)操作

　　trigger()和triggerHandler()方法都可以觸發(fā)事件程序執(zhí)行，但后者不會(huì)執(zhí)行瀏覽器默認(rèn)操作。比如：

1 /* 僅觸發(fā)獲取焦點(diǎn)事件程序，input不會(huì)獲取焦點(diǎn) */2 $('input').triggerHandler("focus");

8、其他用法

　　8.1  綁定多個(gè)事件類(lèi)型：為一個(gè)元素一次性綁定多個(gè)事件類(lèi)型

 1 /* 為一個(gè)元素一次性綁定多個(gè)事件類(lèi)型 */ 2 $('div').on("mouseover mouseout",function(){ 3     $(this).toggleClass("over"); 4 }); 5  6 /* 和下面的相同 */ 7 $('div').on("mouseover",function(){ 8     $(this).toggleClass("over"); 9 }).on("mouseout",function(){10     $(this).toggleClass("over");11 });

　　8.2  添加事件命名空間，便于管理：為元素綁定的多個(gè)事件類(lèi)型用命名空間規(guī)范起來(lái)。

 1 $('div').on("click.plugin",function(){ 2     $("body").append("<p>click事件</p>"); 3 }); 4 $('div').on("mouseover.plugin",function(){ 5     $("body").append("<p>mouseover事件</p>"); 6 }); 7 $('div').on("dblclick.plugin",function(){ 8     $("body").append("<p>dblclick事件</p>"); 9 });10 $('button').click(function(){11     $("div").off(".plugin");   //前面添加的事件都會(huì)被刪除12 });

　　8.3  相同事件名稱(chēng)，不同命名空間執(zhí)行方法：為元素綁定相同的事件類(lèi)型，然后以命名空間的不同按需調(diào)用。

 1 $('div').on("click",function(){ 2     $('body').append("<p>click事件</p>"); 3 }); 4 $('div').on("click.plugin",function(){ 5     $('body').append("<p>click.plugin事件</p>"); 6 }); 7 $('button').click(functiion(){ 8     $('div').trigger("click!");    //注意click后面的感嘆號(hào) 9 });10 /* 當(dāng)點(diǎn)擊<div>，會(huì)觸發(fā)click事件和click.plugin事件。如果只點(diǎn)擊<button>，則只觸發(fā)click事件。注意：trigger（"click"）后面的感嘆號(hào)的作用是匹配所有不包含在命名空間中的click方法。 */

http://www.cnblogs.com/chenwenhao/p/7080110.html

延伸閱讀

• 第一次在團(tuán)隊(duì)中擔(dān)當(dāng)組織者 2023-04-15
• 命名過(guò)程中的趣事 2022-07-12
• 在有限中追求無(wú)限的可能 2022-06-26
• 潛移默化中提高自己的編程能力 2021-05-19
• 我人生中第一份工作 2019-11-06
• 學(xué)習(xí)過(guò)程中，要養(yǎng)成良好的習(xí)慣——穆*杰 2019-07-05
• 在失敗中總結(jié)，在跌倒中爬起——趙*道 2019-05-09
• 扎實(shí)走好每一步 2019-03-13
• 下功夫去擅長(zhǎng)一件事 2019-03-13
• 實(shí)踐出真知，行動(dòng)的結(jié)果 2019-03-13

第一次在團(tuán)隊(duì)中擔(dān)當(dāng)組織者