Jquery基礎之事件操作

標籤：c   style   java   tar   a   ext   

　　事件是使用者操作時頁面或頁面載入時引發的用來完成javascript和HTML之間的互動操作。常見的元素點擊事件、滑鼠事件、鍵盤輸入事件等，較傳Javascript

相比JQuery增加並擴充了基本的事件處理機制，極大的增強了事件處理的能力。

　一、DOM載入事件

　　頁面載入完畢後瀏覽器會通過javascript為Dom元素載入事件，使用Javascript時候使用的是window.onload方法，而Jquery使用的是$(document).ready()方法,下表

展示兩個事件的異同。

	window.onload方法	$(document).ready()方法
執行時機	必須等待所有內容載入完成後才能執行	頁面的DOM元素繪製完成後可以執行不必等待全部內容載入完成。
綁定函數個數	該方法能夠綁定一個函數，如果綁定多個只能執行最後的一個綁定。例： window.onload=function(){alert("1");} window.onload=function(){alert("2");} 執行結果只執行最後綁定的函數結果是列印：2.	能夠註冊多個函數，按綁定順序執行綁定函數。例： $(document).ready(funtction(){alert("1");}); $().ready(function(){alert("2");}); 執行結果是順序執行綁定的函數：先列印1.然後再列印2.
簡化寫法	無	$().ready();$.ready()

　二、事件處理

　　當檔案載入完成後就可以為元素添加事件處理，進而事件執行某些動作完成相關操作。jquery中有多種事件處理方法，主要有bind()、one()、unbind()、live()、trigger()、triggerHander()等。Jquery方法使用bind()方法為匹配的元素進行特定的事件綁定。bind()方法格式如下：

　　　bind(type,[ data],fun);

　　bind()方法有三個參數，各個參數說明如下：

　　第一個參數是事件類型，主要如下：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。也可以是自訂名稱，Jquery中的事件綁定類型比javascript少了"on",因此jquery中事件click對應javascript中的onclick函數。

　　第二個參數是選擇性參數，作為event.data屬性值傳遞給事件對象的額外資料對象。

　　第三個參數是用來綁定的處理函數。

　　為按鈕綁定單擊事件樣本：

　　　　<input type="button" id="btn1" value="單擊">

　　　　$("#btn1").bind("click",function(){alert("單擊事件綁定");});

　　bind()方法為元素繫結的事件一直有效直到unbind()方法或者刪除元素。如果想要綁定事件只能執行一次就要使用one()方法綁定事件。one()同bind()方法一樣，區別在於one()方法綁定的事件只能執行一次。

　　為按鈕綁定一次性事件樣本：

　　　　<input type="button" id="btn1" value="單擊">

　　　　$("#btn1").one("click",function(){alert("單擊事件綁定");});

　　unbind()方法為元素取消事件綁定，unbind()方法的格式如下：

　　　　$(selctor).unbind([type],[data])

　　unbind()方法是元素bind()方法的反向操作，從每個匹配的元素中刪除綁定的事件。當沒有參數時候刪除所有的綁定事件。如果提供了事件類型的參數則刪除指定的綁定事件。如果指定了事件類型，第二個參數指定了函數名稱則刪除事件類型中與第二個參數名稱對應的事件。

　　樣本:

　　　　<input type="button" id="btn1" value="click" />

　　　　<input type="button" id="btn2" value="removeBind" />

　　　　$("#btn1").bind("click", fun1 = function () { alert("事件1"); });

　　　　$("#btn1").bind("click", fun2 = function () { alert("事件2"); });

　　　　$("#btn2").bind("click", function () {
　　　　$("#btn1").unbind("click", fun2);
　　　　});

　　　　該樣本使用unbind()方法的二個參數形式移除第二次綁定的事件處理函數。

　　live()方法為元素動態綁定事件，使用該方法綁定事件後，新加對應元素也能觸發相應事件。live()方法格式如下：

　　　　$(selector).live([type],[data],fun);

　  live動態綁定樣本：

　　　　$("p").live("click",function(){$(this).hide();});

　　該樣本為所有的p元素節點動態添加了click事件，無論是現有的p元素節點還是以後要添加的p元素節點都有會中點單擊時候觸發hide()從而隱藏自己。die()方法是live()方法的反向操作，結果live()方法動態綁定的事件和unbind()方法一樣。使用die()方法取法動態綁定後，所有動態綁定的事件將刪除。

　　trigger()方法在匹配的元素上觸發參數中的事件，該方法會觸發瀏覽器預設事件，返回false阻止瀏覽器預設事件。trigger()方法格式如下:

　　　　$(selector).trigger([type],[data]);

　　trigger()方法樣本：

　　　　$("form:first").trigger("submit");

　　該樣本觸發第一個from表單的submit操作。

　　triggerHandler()方法這個方法會觸發綁定事件，但是不會觸發瀏覽器預設事件。與trigger()方法觸發後返回false效果一樣。使用方法和trigger一樣。

　三、事件

　　事件處理中已經列出了主要的事件類型如下：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。各個事件類型主要是兩種用法綁定事件、觸發事件。以click事件為例，click方法格式如下：綁定事件$(selector).click(functiron(){//函數體})，觸發事件$(selector).click()。例：

　　<input type="button" id="btn1" value="綁定事件"/>

　　<input type="button" id="btn2" value="觸發事件"/>

　　$("#btn1").click(function(){alert("事件綁定");});

　　$("#btn2").click(function(){$("#btn1").click();})

　　該樣本為第一個按鈕btn1綁定事件，為按鈕btn2綁定事件同時在綁定事件中觸發第一個按鈕的綁定事件。其餘事件類型和click類似。

　四、合成事件

　　合成事件也可以稱為互動事件是JQuery自訂的方法，方法有兩個hover()和toggle()。

　　hover()方法模仿滑鼠移至上方事件，方法格式如下：hover(enter,leave)。例：

　　$("ul li").hover(function(){alert("Enter");},functiron(){alert("leave");});

　　該樣本為ul的li元素繫結懸停事件，當滑鼠停上ul的子項目li上時候會觸發enter()函數，列印“Enter”,當滑鼠移出li元素時候會列印"leave"。

　　toggle()方法切換操作迴圈執行綁定的函數，方法格式如下：toggle(fun1,fun2,...,funN);例:

　　<input type="button" id="btn1" value="觸發切換操作"/>

　　$("#btn1").toggle(function(){alert("開始");},function(){alert("繼續");},function(){alert("結束");});

　　該樣本為按鈕btn1綁定切換事件每次單擊都會順序觸發綁定事件中的一個。該樣本第一次點擊列印"開始"，第二次點擊列印"繼續",第三次點擊列印"結束"，再次點擊和第一次一樣列印"開始"，迴圈順序執行函數。

　五、事件屬性

　　Jquery對事件屬性進行了封裝使事件處理在各瀏覽器下不需要判別類型都能正常運行。各個事件屬性的如下：

　　事件類型event.type.該屬性用於獲得觸發該事件的類型，對不引發事件的不同操作返回不同的結果;例：

　　　　$("p").click(function(event){alert(event.type);});

　　該樣本返回元素p單擊事件的事件類型，結果列印是 "click";

　　事件類型event.target該屬性用於獲得觸發事件的元素;例：

　　　　$("a").click(function(event){alert(event.target.href);});

　　該樣本返回元素a的href屬性。

　　事件預設行為event.preventDefault;該屬性用於阻止事件的預設屬性，例：

　　　　$("a").click(function(event){event.preventDefault;});

　　使用該屬性阻止元素a的預設的跳轉行為，結果和return false一樣。

　　事件冒泡event.stropPropagation屬性用於阻止事件冒泡，例：

　　　　$("div").click(function(event){alert("裡層點擊");event.stopPropagation;});

　　該樣本中使用stopPropagation屬性阻止div的父元素的click事件被觸發。

　　event.pageX和event.pageY屬性，使用這兩個屬性可以獲得滑鼠的相對於頁面的當前位置。例：

　　　　$("p").click(function(event){alert("current mouse location  "+event.pageX+" "+event.pageY);});

　　該樣本當點擊元素p的時候獲得滑鼠的當前位置，並列印出來。

　　event.witch屬性，使用這個屬性可以獲得按一下滑鼠時候滑鼠的左中右鍵，在鍵盤事件中獲得索引值。

　　　　$("p").mousedown(function(event){alert(event.witch);});

　　該樣本當滑鼠按下時候列印滑鼠鍵值。左中右健分別對應值是1、2、3。

　　event.metaKey屬性用於在事件獲得鍵盤的ctrl鍵，例：

　　　　$("body").keydown(function(event){if(event.metaKey){alert("ctrl");}else{alert("no ctrl");}});

　　該樣本當在頁面中按下鍵盤時候如果按鍵為ctrl鍵就列印ctrl，否則列印"no ctrl".

 　六、事件冒泡

　　頁面中有多個綁定事件因此可能出現多個元素響應同一個事件，由此引發了事件不是我們預期的，這種現象就是事件冒泡，要處理這個問題可以對事件的作用範圍進行限制，Jquery中使得stopPropagation()方法停止事件的冒泡。事件冒泡樣本：

　　<body><div><span>事件冒泡</span>div內容</div>body內容</body>

　　$("body").click(function(){alert("body");});

　　$("body div").click(function(){alert("div");});

　　$("span").click(function(){alert("span");});

　　在該樣本中當點擊span時候會觸發三個列印事件 "span" "div" "body"，如何阻止事件冒泡？可以使用Jquery事件中的stropPropagation()方法來停止事件冒泡。上面樣本改成這樣：

　　$("body").click(function(event){alert("body");event.stopPropagation();});

　　$("body div").click(function(event){alert("div");event.stopPropagation();});

　　$("span").click(function(event){alert("span");event.stopPropagation();});

　　這樣當點擊不同元素時候就不會發生冒泡事件。

　七、事件命名空間

　　事件添加命名空間便於事件的管理:刪除事件和觸發事件。例：

　　<div>元素繫結多個事件</div>

　　$("div").bind("click.plugin",function(){alert("click.plugin");});

　　$("div").bind("click",function(){alert("click");});

　　$("div").bind("mouseover.plugin",function(){alert("mouseover.plugin");});

　　$("div").bind("dbclick",function(){alert("dbclick");});

　　由於使用了命名空間可以刪除指定命名空間中的事件，如移除所有plugin命名空間下的事件函數方法如下:$("button").click(function(){$("div").unbind(".plugin");});這樣就移除了所有命名空間是plugin的事件函數。div中只剩下click和dbclick綁定事件。

　　使用命名空間對觸發特定的事件了帶來了方便，如為div綁定了兩個click事件，一個是帶命名空間的一個是不帶命名空間。如果想要觸發不包含在命名空間中的事件可以使用trigger("click!")方法，！驚嘆號的作用是匹配所有不包含在命名空間中的click方法。