jQuery 處理頁面的事件詳解_jquery

在先前dom操作中提到了javascript對事件處理的介紹。由於不同瀏覽器處理事件各不相相同，這給開發者帶來了不必要的麻煩，jQuery的方便的解決了這個方面的麻煩。

1.綁定事件監聽

（http://www.jb51.net/article/60096.htm）對事件的監聽做了詳細的介紹，看到了iE和DOM標準瀏覽器對待事件監聽的區別，並對多個監聽事件執行順序和方式也不相同。

在jQuery中，透過bind()對事件綁定，相當於IE瀏覽器的attachEvent()和標準DOM的addEventListener()。如下例：

複製程式碼 程式碼如下:

");
                    })
                    .bind("click", function() {
                        $("#show").append("

點選事件2

");
                    })
                    .bind("click", function() {
                        $("#show").append("

點選事件3

");
                    });
            });
       

       
       

以上程式碼對img綁定了三個click監聽事件.

bind()一般語法為

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為可選參數，用來傳遞一些特殊的資料供監聽函數使用。而listener為事件監聽函數，上面的例子使用匿名函數

對於多個事件類型，如果希望使用同一個監聽函數，可以同事新增在eventType中，事件之間使用空格分離。

複製程式碼 程式碼如下:

$(function() {
                $("p").bind("mouseenter mouseleave", function() {
                    $(this).toggleClass("over")
                })
            });

另外一些特殊的事件類型可以直接利用事件名稱作為綁定函數，接受參數為監聽函數。例如之前重複使用的

複製程式碼 程式碼如下:

$("p").click(function(){
                //新增click事件監控函數
            })

其中，通用語法為

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也提供了一個很實用的one()方法來綁定事件。此方法綁定回見出發了一次後就會自動刪除，不再生效。

複製程式碼 程式碼如下:

     //先建立10個

區塊
            for (var i = 0; i                 $(document.body).append($("

Click
Me!

"));
            var iCounter = 1;
             //每個使用one新增click事件
            $("div").one("click", function() {
                $(this).css({
                    background: "#8f0000",
                    color: "#FFFFFF"
                }).html("Clicked!
" (iCounter ));
            });

例如上例，建立10個div,給每個div綁定一個函數事件，當點擊div區塊時，函數執行一次便不再執行。

2.移除事件監聽

jQuery採用unbind()來移除事件，該方法可以接受兩個可選函數，也可不設定任何參數，例如下面的程式碼表示移除div標記的所有事件和P標記的所有click事件。

複製程式碼 程式碼如下:

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

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

複製程式碼 程式碼如下:

var myFunc = function() {
                //監聽函數本體
            };
            $("p").bind("click",myFunc);
            $("p").unbind("click",myFunc);

例如以下程式碼

複製程式碼 程式碼如下:

");
                    })
                    .bind("click", function() {
                        $("#show").append("

點選事件2

");
                    })
                    .bind("click", function() {
                        $("#show").append("

點選事件3

");
                    });
                $("input[type=button]").click(function() {
                    $("img").unbind("click", fnMyFunc1); //移除事件監聽myFunc1
                });
            });
       
       
       
       
       

例如以上程式碼，加入了fnMyFunc1函數bind()綁定時將匿名函數賦值給他，從而作為unbind()函數呼叫名稱。

3.傳遞事件物件。

http://www.jb51.net/article/60096.htm介紹了物件的概念，並且分析了事件物件常用的屬性和方法，可以看到事件物件在不同的瀏覽器之間存在著許多區別，jQuery中沒時間物件是透過唯一的方法傳遞給事件監聽函數的。

複製程式碼 程式碼如下:

       

點此

       

以上的程式碼給p綁定了滑鼠click事件監聽函數，並將事件物件作為參數傳遞，從而取得了滑鼠事件觸發點的座標值。

對於事件的屬性和方法，jQuery最重要的工作就是替開發者解決了相容性問題，常用的屬性和方法

屬性 說明
altKey 按下alt鍵為ture，否則為false
ctrlKey 按下ctrl鍵為ture，否則為false
shiftKey 按下shift鍵為ture，否則為false
keyCode 對於keyup和keydown事件，傳回按鍵的值（即a和A的值是一樣的，都是65）
pageX，pageY 滑鼠在客戶端的位置，不包括工具列，捲軸等
relateTarget 
滑鼠事件中，滑鼠指標進入或離開元素。

screenX,screenY 滑鼠在整個螢幕的位置。
target 引起事件的元素/物件
type 事件的名稱，如click,mouseover等
which 鍵盤事件中為按鍵的unicode值，滑鼠按鍵中代表滑鼠按鍵（1左鍵 2中鍵 3為右鍵）
stopPropagation() 阻止事件向上冒泡。
preventDefault() 阻止事件預設行為

以上即是本文的全部內容了，講解的非常詳細，希望大家能夠喜歡。