事件是用戶操作時頁面或頁面加載時引發的用來完成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方法。