這篇文章主要詳細(xì)介紹了jQuery 處理頁(yè)面的事件的方法及相關(guān)資料,需要的朋友可以參考下

在之前dom操作中提到了javascript對(duì)事件處理的介紹。由于不同瀏覽器處理事件各不相相同，這給開(kāi)發(fā)者帶來(lái)了不必要的麻煩，jQuery的方便的解決了這個(gè)方面的麻煩。

1.綁定事件監(jiān)聽(tīng)

（）對(duì)事件的監(jiān)聽(tīng)做了詳細(xì)的介紹，看到了iE和DOM標(biāo)準(zhǔn)瀏覽器對(duì)待事件監(jiān)聽(tīng)的區(qū)別，并對(duì)多個(gè)監(jiān)聽(tīng)事件執(zhí)行順序和方式也不相同。

在jQuery中，通過(guò)bind()對(duì)事件綁定，相當(dāng)于IE瀏覽器的attachEvent()和標(biāo)準(zhǔn)DOM的addEventListener()。如下例子：

代碼如下:

<script type="text/javascript">

$(function() {

$("img")

.bind("click", function() {

$("#show").append("<div>點(diǎn)擊事件1</div>");

})

.bind("click", function() {

$("#show").append("<div>點(diǎn)擊事件2</div>");

})

.bind("click", function() {

$("#show").append("<div>點(diǎn)擊事件3</div>");

});

});

</script>

<img src="11.jpg">

<div id="show"></div>

以上代碼對(duì)img綁定了三個(gè)click監(jiān)聽(tīng)事件.

bind()通用語(yǔ)法為

bind(eventType,[data],Listener)

其中，eventType為事件的類型，可以是blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/mouseup/onmouseover/onmouseover/onmouseout/mouseenter/onmouseleave/change/select/submit/onkeydown/keypress/keyup/error

data為可選參數(shù)，用來(lái)傳遞一些特殊的數(shù)據(jù)供監(jiān)聽(tīng)函數(shù)使用。而listener為事件監(jiān)聽(tīng)函數(shù)，上面的例子中使用匿名函數(shù)

對(duì)于多個(gè)事件類型，如果希望使用同一個(gè)監(jiān)聽(tīng)函數(shù)，可以同事添加在eventType中，事件之間使用空格分離。

代碼如下:

$(function() {

$("p").bind("mouseenter mouseleave", function() {

$(this).toggleClass("over")

})

});

另外一些特殊的事件類型可以直接利用事件名稱作為綁定函數(shù)，接受參數(shù)為監(jiān)聽(tīng)函數(shù)。例如之前反復(fù)使用的

代碼如下:

$("p").click(function(){

//添加click事件監(jiān)聽(tīng)函數(shù)

})

其中，通用語(yǔ)法為

eventTypeName(fn)

可以使用的eventTypeName包括

blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/onmouseup/mousemove/mouseover/mouseout/change/select/submit/

keydown/keypress/keyup/error等

除了bind()外，jQuery還提供了一個(gè)很實(shí)用的one()方法來(lái)綁定事件。該方法綁定回見(jiàn)出發(fā)了一次后就會(huì)自動(dòng)刪除，不再生效。

代碼如下:

//首先創(chuàng)建10個(gè)<div>塊

for (var i = 0; i < 10; i++)

$(document.body).append($("<div>Click<br>Me!</div>"));

var iCounter = 1;

//每個(gè)都用one添加click事件

$("div").one("click", function() {

$(this).css({

background: "#8f0000",

color: "#FFFFFF"

}).html("Clicked!<br>" + (iCounter++));

});

例如上例，創(chuàng)建10個(gè)div,給每個(gè)div綁定一個(gè)函數(shù)事件，當(dāng)點(diǎn)擊div塊時(shí)，函數(shù)執(zhí)行一次便不再執(zhí)行。

2.移除事件監(jiān)聽(tīng)

jQuery采用unbind()來(lái)移除事件，該方法可以接受兩個(gè)可選函數(shù)，也可不設(shè)置任何參數(shù)，例如下面的代碼表示移除div標(biāo)記的所有事件和P標(biāo)記的所有click事件。

代碼如下:

$("p").unbind("click");

$("div").unbind();

如果希望移除某個(gè)指定的事件，則必須使用unbind(eventType,listener)方法的第二個(gè)參數(shù)，例如：

代碼如下:

var myFunc = function() {

//監(jiān)聽(tīng)函數(shù)體

};

$("p").bind("click",myFunc);

$("p").unbind("click",myFunc);

例如以下代碼

代碼如下:

<script type="text/javascript">

$(function() {

var fnMyFunc1; //函數(shù)變量

$("img")

.bind("click", fnMyFunc1 = function() { //賦給函數(shù)變量

$("#show").append("<div>點(diǎn)擊事件1</div>");

})

.bind("click", function() {

$("#show").append("<div>點(diǎn)擊事件2</div>");

})

.bind("click", function() {

$("#show").append("<div>點(diǎn)擊事件3</div>");

});

$("input[type=button]").click(function() {

$("img").unbind("click", fnMyFunc1); //移除事件監(jiān)聽(tīng)myFunc1

});

});

</script>

<img src="11.jpg">

<input type="button" value="移除事件1">

<div id="show"></div>

例如以上代碼，添加了fnMyFunc1函數(shù)bind()綁定時(shí)將匿名函數(shù)賦值給他，從而作為unbind()函數(shù)調(diào)用名稱。

3.傳遞事件對(duì)象。

介紹了對(duì)象的概念，并且分析了事件對(duì)象常用的屬性和方法，可以看到事件對(duì)象在不同的瀏覽器之間存在很多區(qū)別，jQuery中沒(méi)時(shí)間對(duì)象是通過(guò)唯一的方法傳遞給事件監(jiān)聽(tīng)函數(shù)的。

代碼如下:

<script type="text/javascript">

$(function() {

$("p").bind("click", function(e) { //傳遞事件對(duì)象e

var sPosPage = "(" + e.pageX + "," + e.pageY + ")";

var sPosScreen = "(" + e.screenX + "," + e.screenY + ")";

$("span").html("<br>Page: " + sPosPage + "<br>Screen: " + sPosScreen);

});

});

</script>

<p>點(diǎn)擊此處</p>

<span id=""></span>

以上的代碼給p綁定了鼠標(biāo)click事件監(jiān)聽(tīng)函數(shù)，并將事件對(duì)象作為參數(shù)傳遞，從而獲取了鼠標(biāo)事件觸發(fā)點(diǎn)的坐標(biāo)值。

對(duì)于事件的屬性和方法，jQuery最重要的工作就是替開(kāi)發(fā)者解決了兼容性問(wèn)題，常用的屬性和方法

屬性 說(shuō)明

altKey 按下alt鍵為ture，否則為false

ctrlKey 按下ctrl鍵為ture，否則為false

shiftKey 按下shift鍵為ture，否則為false

keyCode 對(duì)于keyup和keydown事件，返回按鍵的值（即a和A的值是一樣的，都是65）

pageX，pageY 鼠標(biāo)在客戶端的位置，不包括工具欄，滾動(dòng)條等

relateTarget

鼠標(biāo)事件中，鼠標(biāo)指針進(jìn)入或離開(kāi)元素。

screenX,screenY 鼠標(biāo)在整個(gè)屏幕的位置。

target 引起事件的元素/對(duì)象

type 事件的名稱，如click,mouseover等

which 鍵盤事件中為按鍵的unicode值，鼠標(biāo)按鍵中代表鼠標(biāo)按鍵（1左鍵 2中鍵 3為右鍵）

stopPropagation() 阻止事件向上冒泡。

preventDefault() 阻止事件默認(rèn)行為

以上即是本文的全部?jī)?nèi)容了，講解的非常詳細(xì)，希望大家能夠喜歡。

更多信息請(qǐng)查看IT技術(shù)專欄