jQuery學習四 事件與事件對象

時間  2019-11-06
標籤 jquery 學習 事件 對象 欄目 JQuery 简体版
原文   原文鏈接

一.摘要

事件是腳本編程的靈魂. 因此本章內容也是jQuery學習的重點. 本文將對jQuery中的事件處理以及事件對象進行詳細的講解. javascript

 

.事件與事件對象

首先看一下咱們常用的添加事件的方式:css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>javascript中的事件</title>

    <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>

    <script type="text/javascript">
        $(function()
        {
            document.getElementById("testDiv2").onclick = showMsg;
        })

        function showMsg(event)
        {
            alert("!!!");
        }        
    </script>
</head>
<body>
    <div id="testDiv1" onclick="showMsg();">單擊事件 1</div>
    <div id="testDiv2">單擊事件 2</div>
</body>
</html>

咱們最常使用爲元素添加onclick元素屬性的方式添加事件.html

爲testDiv2的添加onclick事件的方式是修改Dom屬性.java

在上一章中已經說明了什麼是元素屬性, 什麼是Dom屬性.這兩種方式的效果相同. 當單擊div時會顯示提示框.jquery

請注意, 雖然效果相同, 可是並不等效.編程

document.getElementById("testDiv2").onclick = showMsg;

等效於:瀏覽器

<div id="testDiv1" onclick="alert("!!!");">單擊事件 1</div>

注意二者的區別了嗎?  咱們經常使用的修改元素屬性添加事件的方式, 其實是創建了一個匿名函數:dom

document.getElementById("testDiv1").onclick = function(event)
{
    alert("!!!");
};

這個匿名函數的簽名和咱們手寫的showMsg簽名相同, 因此能夠把showMsg直接賦值給onclick.ide

這個匿名函數的簽名和咱們手寫的showMsg簽名相同, 因此能夠把showMsg直接賦值給onclick.函數

這種方式的弊端是:

1. 只能爲一個事件綁定一個事件處理函數.  使用"="賦值會把前面爲此時間綁定的全部事件處理函數沖掉.

2. 在事件函數(不管是匿名函數仍是綁定的函數)中獲取事件對象的方式在不一樣瀏覽器中要特殊處理:

IE中,事件對象是window對象的一個屬性.事件處理函數必須這樣訪問事件對象:

obj.onclick=function()
        {
            var oEvent = window.event;
        }

在DOM標準中,事件對象必須做爲惟一參數傳給事件處理函數:

obj.onclick=function()
        {
            var oEvent = arguments[0];
        }

除了使用argument[0]訪問此參數, 咱們也能夠指定參數名稱,上面的代碼等同於:

obj.onclick=function(oEvent)
        {
            
        }

目前兼容DOM的瀏覽器有Firefox,Safari,Opera,IE7等.

3. 添加多播委託的函數在不一樣瀏覽器中是不同的.

下面是在"Javascript公共腳本庫系列(二): 添加事件多播委託的方法"文章中,  提供的兼容多瀏覽器添加多播委託的方法:

//統一的爲對象添加多播事件委託的方法
/*  
    參數說明:
    oTarget     : 要添加事件的對象.好比"document".
    sEventType  : 事件類型.好比單擊事件"click".
    fnHandler   : 發生事件時調用的方法. 好比一個靜態函數"hideCalendar"
    
    使用舉例:
    //單擊頁面的任何元素,只要沒有取消冒泡,均可以關閉日曆控件
    var cf = document.getElementById("CalFrame");
    if( cf != null && hideCalendar != null )
    {
        ScriptHelper.addEventListener( document, "click", hideCalendar );
    }
*/
scriptHelper.prototype.addEventListener = function(oTarget, sEventType, fnHandler)
{
    if( oTarget.addEventListener )//for dom
    {
        oTarget.addEventListener( sEventType, fnHandler, false )
    }
    else if( oTarget.attachEvent )//for ie
    {
        oTarget.attachEvent( "on" + sEventType, fnHandler);
    }
}

因此咱們首先應該摒棄<div onclick="..."></div>這種經過修改元素屬性添加事件的方式. 儘可能使用添加多播事件委託的方式爲一個事件綁定多個事件處理函數, 好比爲document對象的單擊事件添加一個關閉彈出層的方法, 使用多播就不會影響document對象原有的事件處理函數.

四. jQuery中的事件

有了jQuery,  咱們有了處理對象事件的一系列函數.  上面基礎知識仍是要懂, 可是不再用本身去實現處理多播事件委託的函數了.  正所謂有了jQuery, 每天喝茶水. 下面是在jQuery中最常使用的bind()方法舉例:

$("#testDiv4").bind("click", showMsg);

咱們爲id是testDiv4的元素, 添加列click事件的事件處理函數showMsg.

使用jQuery事件處理函數的好處:

1. 添加的是多播事件委託.  也就是爲click事件又添加了一個方法, 不會覆蓋對象的click事件原有的事件處理函數.

$("#testDiv4").bind("click", function(event) { alert("one"); });
            $("#testDiv4").bind("click", function(event) { alert("two"); });

單擊testDiv4對象時, 依次提示"one"和"two".

2. 統一了事件名稱.
添加多播事件委託時, ie中是事件名稱前面有"on". 可是使用bind()函數咱們不用區分ie和dom ,  由於內部jQuery已經幫咱們統一了事件的名稱.

3. 能夠將對象行爲所有用腳本控制.
讓HTML代碼部分只注意"顯示"邏輯. 如今的趨勢是將HTML的行爲, 內容與樣式切分乾淨. 其中用腳本控制元素行爲, 用HTML標籤控制元素內容, 用CSS控制元素樣式. 使用jQuery事件處理函數能夠避免在HTML標籤上直接添加事件.

五.經常使用事件函數舉例

1.bind( type, [data], fn ) 函數舉例

bind()是最常使用的函數,  注意方法簽名上data參數, 能夠在事件處理以前傳遞一些附加的數據:

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

注意event參數的使用. jQuery中統一了事件對象, 將事件對象做爲事件處理函數的惟一參數傳遞.

data參數咱們也要經過event.data 進行訪問.  爲什麼要提供data參數呢?

由於咱們常常碰到這樣的問題: 但願在事件處理中根據事件源的某些數據進行特殊處理.

目前網上有兩種存在爭議的解決方法:

(1) 使用自定義元素屬性存儲數據.

好比:

<div id="testDiv5" customer="customer data 1">獲取自定義數據-1</div>

在事件處理函數中獲取數據:

$("#testDiv5").bind("click", function(event) { alert($(event.target).attr("customer")); });

attr函數是上一講中的知識, 用於獲取元素的"元素屬性", 並且能夠獲取自定義的元素屬性. 單擊div後將顯示:

image

(2) 使用腳本將數據傳遞給事件處理函數:

<div id="testDiv6">獲取自定義數據-2</div>

元素沒有任何的自定義屬性, 添加事件處理函數時將額外的數據傳遞:

$("#testDiv6").bind("click", { customer: "customer data 2" }, function(event) { alert(event.data.customer) });

點擊div後的結果和方法1相同:

image

方法1便於存儲和查找數據. 可是自定義屬性經過不W3C驗證.

方法2必需要本身想辦法存儲數據, 而且要制定規則查找指定元素的數據.

從"開發人員"的角度方法1要更加簡單直觀. 可是缺點比較嚴重. 因此如何取捨請你們本身決定.

 

one( type, [data], fn ) 函數和bind同樣, 可是隻執行一次.

2. trigger( event, [data] ) 和 triggerHandler( event, [data] )

雖然爲元素綁定了某些事件, 好比click, 可是有時但願在程序中觸發這些事件,  這兩個函數能夠實現此功能.

主要區別是trigger會出發瀏覽器默認的動做, 而triggerHandler不會出發.

經過下面的實例能夠明確的區分這兩個函數:

六.快捷事件 Event Helpers

BUG提示:jquery-1.3.2-vsdoc2.js 這個最新的官方帶智能提示的類庫, 沒法使用快捷事件, 好比click(), focus(). 使用其餘版本的類庫則沒有問題.

雖然咱們可使用事件處理函數完成對象事件的幾乎全部操做, 可是jQuery提供了對經常使用事件的封裝. 好比單擊事件對應的兩個方法click()和click(fn)分別用來觸發單擊事件和設置單擊事件.

設置單擊事件:

$("#testDiv").click(function(event) { alert("test div clicked ! "); });

等效於:

$("#testDiv").bind("click", function(event) { alert("test div clicked ! "); });

觸發單擊事件:

$("#testDiv").click();

等效於

$("#testDiv").trigger("click");

七. 交互幫助方法

除了基本的實踐, jQuery提供了兩個和事件相關的幫助方法: hover( over, out ) 和 toggle( fn, fn2, fn3,fn4,... )

1. hover( over, out )

hover函數主要解決在原始javascript中mouseover和mouseout函數存在的問題

 

2. toggle( fn, fn2, fn3,fn4,... )

toggle函數能夠爲對象添加click事件綁定函數,  可是設置每次點擊後依次的調用函數。

若是點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數，若是有更多函數，則再次觸發，直到最後一個。隨後的每次點擊都重複對這幾個函數的輪番調用。

可使用unbind("click")來刪除。

下面的示例演示如何使用toggle函數:

<html>
<head>
    <title>toggle example</title>
    <link rel="stylesheet" type="text/css" href="css/hover.css">

    <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>

    <script type="text/javascript">
        $(function()
        {
            $("li").toggle(
              function()
              {
                  $(this).css({ "list-style-type": "disc", "color": "blue" });
              },
              function()
              {
                  $(this).css({ "list-style-type": "square", "color": "red" });
              },
              function()
              {
                  $(this).css({ "list-style-type": "none", "color": "" });
              }
            );
        })
    </script>

</head>
<body>
    <ul>
        <li style="cursor:pointer">click me</li>
    </ul>
</body>
</html>
 

八.使用jQuery事件對象

使用事件天然少不了事件對象.  由於不一樣瀏覽器之間事件對象的獲取, 以及事件對象的屬性都有差別, 致使咱們很難跨瀏覽器使用事件對象.

jQuery中統一了事件對象,  當綁定事件處理函數時,  會將jQuery格式化後的事件對象做爲惟一參數傳入:

$("#testDiv").bind("click", function(event) {  });

關於event對象的詳細說明, 能夠參考jQuery官方文檔: http://docs.jquery.com/Events/jQuery.Event

jQuery事件對象將不一樣瀏覽器的差別進行了合併, 好比能夠在全部瀏覽器中經過 event.target 屬性來獲取事件的觸發者(在IE中使用原生的事件對象, 須要訪問event.srcElement).

 

九. 總結

事件是javascript的靈魂,

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程