本篇文章是至今為止本系列內容最多的一篇, 足以可見其重要性. 大家反映要多列舉示例. 我會在時間允許的情況下盡量多列舉示例. 真正的投入生產使用的實例暫時還無法加入到文章中, 但是可能最后我會列舉一些作品供大家借鑒. 另外本人水平有限, 因為我不是UI設計師. 文章可能有錯誤的地方, 希望大家幫忙指出, 一起學習一起進步. 在技術的世界里我們是沒有任何利益瓜葛. 希望大家都抱著彼此鼓勵的心態, 對于回復中的激進評論我也都會考慮, 但是希望能夠彼此尊重, 保護博客園這片程序員的凈土!

三.事件與事件對象

曾經在我的 "Javascript公共腳本庫系列(二): 添加事件多播委托的方法" 和 "Javascript公共腳本庫系列(三): 格式化事件對象/事件對象詳解" 兩篇文章中, 曾講解過javascript中的事件和事件對象.

首先看一下我們經常使用的添加事件的方式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
l1/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元素屬性的方式添加事件.

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

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

請注意, 雖然效果相同, 但是并不等效.

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

等效于:

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

注意兩者的區別了嗎? 我們常用的修改元素屬性添加事件的方式, 實際上是建立了一個匿名函數:

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

這個匿名函數的簽名和我們手寫的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);
    }
}