事件是用戶操作時頁面或頁面加載時引發(fā)的用來完成javascript和HTML之間的交互操作。常見的元素點擊事件、鼠標事件、鍵盤輸入事件等，較傳Javascript

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

一、DOM加載事件

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

展示兩個事件的異同。

二、事件處理

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

bind(type,[ data],fun);

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

第一個參數(shù)是事件類型，主要如下：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對應(yīng)javascript中的onclick函數(shù)。

第二個參數(shù)是可選參數(shù)，作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象。

第三個參數(shù)是用來綁定的處理函數(shù)。

為按鈕綁定單擊事件示例：

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

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

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

為按鈕綁定一次性事件示例：

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

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

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

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

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

示例：

<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()方法的二個參數(shù)形式移除第二次綁定的事件處理函數(shù)。

live()方法為元素動態(tài)綁定事件，使用該方法綁定事件后，新加對應(yīng)元素也能觸發(fā)相應(yīng)事件。live()方法格式如下：

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

live動態(tài)綁定示例：

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

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

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

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

trigger()方法示例：

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

該示例觸發(fā)第一個from表單的submit操作。

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

三、事件

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

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

<input type="button" id="btn2" value="觸發(fā)事件"/>

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

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

該示例為第一個按鈕btn1綁定事件，為按鈕btn2綁定事件同時在綁定事件中觸發(fā)第一個按鈕的綁定事件。其余事件類型和click類似。

四、合成事件

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

hover()方法模仿鼠標懸停事件，方法格式如下：hover(enter,leave)。例：

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

該示例為ul的li元素綁定懸停事件，當(dāng)鼠標停上ul的子元素li上時候會觸發(fā)enter()函數(shù)，打印“Enter”,當(dāng)鼠標移出li元素時候會打印"leave"。

toggle()方法切換操作循環(huán)執(zhí)行綁定的函數(shù)，方法格式如下：toggle(fun1,fun2,...,funN);例:

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

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

該示例為按鈕btn1綁定切換事件每次單擊都會順序觸發(fā)綁定事件中的一個。該示例第一次點擊打印"開始"，第二次點擊打印"繼續(xù)",第三次點擊打印"結(jié)束"，再次點擊和第一次一樣打印"開始"，循環(huán)順序執(zhí)行函數(shù)。

五、事件屬性

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

事件類型event.type.該屬性用于獲得觸發(fā)該事件的類型，對不引發(fā)事件的不同操作返回不同的結(jié)果;例：

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

該示例返回元素p單擊事件的事件類型，結(jié)果打印是 "click";

事件類型event.target該屬性用于獲得觸發(fā)事件的元素;例：

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

該示例返回元素a的href屬性。

事件默認行為event.preventDefault;該屬性用于阻止事件的默認屬性，例：

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

使用該屬性阻止元素a的默認的跳轉(zhuǎn)行為，結(jié)果和return false一樣。

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

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

該示例中使用stopPropagation屬性阻止div的父元素的click事件被觸發(fā)。

event.pageX和event.pageY屬性，使用這兩個屬性可以獲得鼠標的相對于頁面的當(dāng)前位置。例：

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

該示例當(dāng)點擊元素p的時候獲得鼠標的當(dāng)前位置，并打印出來。

event.witch屬性，使用這個屬性可以獲得鼠標單擊時候鼠標的左中右鍵，在鍵盤事件中獲得鍵值。

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

該示例當(dāng)鼠標按下時候打印鼠標鍵值。左中右健分別對應(yīng)值是1、2、3。

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

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

該示例當(dāng)在頁面中按下鍵盤時候如果按鍵為ctrl鍵就打印ctrl，否則打印"no ctrl".

六、事件冒泡

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

<body><div><span>事件冒泡</span>div內(nèi)容</div>body內(nèi)容</body>

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

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

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

在該示例中當(dāng)點擊span時候會觸發(fā)三個打印事件 "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();});

這樣當(dāng)點擊不同元素時候就不會發(fā)生冒泡事件。

七、事件命名空間

事件添加命名空間便于事件的管理:刪除事件和觸發(fā)事件。例：

<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命名空間下的事件函數(shù)方法如下:$("button").click(function(){$("div").unbind(".plugin");});這樣就移除了所有命名空間是plugin的事件函數(shù)。div中只剩下click和dbclick綁定事件。

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

以上這篇Jquery基礎(chǔ)之事件操作詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論