Javascript公用指令碼庫系列(三): 格式化事件對象/事件對象詳解

來源:互聯網
上載者:User
文章目錄
  • 執行個體一 在螢幕上捕獲滑鼠按鍵代碼和鍵盤按鍵代碼
  • 執行個體二  重寫滑鼠右鍵菜單
  • 擷取
  • 通用的事件對象資料
一.摘要

本系列文章是為了抽象通用的,跨瀏覽器的指令碼方法.

本篇文章為指令碼庫添加跨瀏覽器的擷取事件對象的方法, 重點是講解javascript中的事件對象的原理.希望通過分享微薄的知識告訴大家如何進行"加法運算"而不是死記硬背"1+1=2".

二.實現效果

本次添加的兩個函數用於擷取事件對象, 事件對象中包含很多的資訊,比如滑鼠的座標, 從而實現自己想要的功能.

執行個體一可以在螢幕上捕獲滑鼠按鍵代碼和鍵盤按鍵代碼:

 

 

執行個體二實現重寫滑鼠右鍵菜單:

三.事件對象簡介

事件來源和事件對象就相當於C#中事件函數的sender和EventArgs參數.

事件來源是產生事件的元素本身, 而事件對象則帶有事件相關的資訊.事件對象只有在發生事件時才被建立, 並且只能在事件中訪問.當事件關聯的處理函數執行完畢後, 事件對象就被銷毀.

事件對象帶有很多有用的資訊,比如螢幕座標,按鍵代碼,是否冒泡等.但是可惜的是FireFox支援的DOM事件模型和IE的事件模型並不完全一致,擷取事件對象的方式也不相同.在IE中通過window.event使用當前的事件對象,而DOM則規定事件對象要作為唯一參數傳遞給事件處理函數.

四.實現代碼

我們的ScriptHelper類又要添加兩個新方法了:

/*  擷取事件對象    使用舉例: <div onclick=" var oEvent=ScriptHelper.getEvent();"></div>    注意事項: 只能在事件中使用. 比如onclick中. 不能在自訂方法中使用.   */scriptHelper.prototype.getEvent = function(){    if( window.event )    {        return window.event;    }    else    {                return this.getEvent.caller.arguments[0];    }} /*  取消冒泡事件    使用舉例: <div onclick=" var oEvent=ScriptHelper.cancelBubble();"></div>    注意事項: 只能在事件中使用. 比如onclick中.  不能在自訂方法中使用.*/scriptHelper.prototype.cancelBubble = function(){    if( window.event )    {        window.event.cancelBubble = true;    }    else    {                return this.cancelBubble.caller.arguments[0].cancelBubble = true;    }} 

這兩個方法十分簡單.getEvent 用於擷取事件對象. cancelBubble和getEvent類似,但不是返回事件對象, 而是取消事件對象的冒泡事件.

也許有人會覺得getEvent 和cancelBubble中有重複代碼,認為可以在cancelBubble中調用getEvent 擷取事件對象,然後再取消冒泡事件. 然而不能這麼做, 這兩個事件都只能用在事件處理函數中, cancelBubble已經是一個自訂方法, 不能在自訂方法中使用getEvent .原因是在DOM事件中,事件對象是事件的唯一參數.對於FireFox我們是通過caller.arguments[0]來捕獲事件對象,caller表示此方法的調用者, 必須為事件. 下文中還有對於事件參數的講解.

五.應用執行個體執行個體一 在螢幕上捕獲滑鼠按鍵代碼和鍵盤按鍵代碼執行個體代碼:

<!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>ScriptHelper 類測試 -- 事件對象執行個體 -- 擷取鍵盤滑鼠按鍵代碼</title>    <script src="http://files.cnblogs.com/zhangziqiu/ScriptHelper.js" type="text/javascript"></script>    <style type="text/css">        .cursorHand { cursor:pointer;}            </style></head><body >    <script type="text/javascript">        function getKeyCode()        {            var oEvent = ScriptHelper.getEvent();            alert( "KeyCode:" + oEvent.keyCode);        }                function getMouseButtonCode()        {            var oEvent = ScriptHelper.getEvent();            alert( "Mouse Button Code:" + oEvent.button);        }                ScriptHelper.addEventListener( document, "keydown", getKeyCode );        ScriptHelper.addEventListener( document, "mousedown", getMouseButtonCode );      </script>   </body></html>
執行個體說明:

本執行個體中使用了ScriptHelper.getEvent方法擷取事件對象,並且擷取了事件對象中的鍵盤代碼和滑鼠按鍵代碼.注意執行個體中是使用ScriptHelper.addEventListener將getKeyCode和getMouseButtonCode添加到事件上.此時getKeyCode函數等同於onkeydown事件, 所以在getKeyCode函數中調用ScriptHelper.getEvent就等同於在onkeydown事件中調用.

但是注意不能這麼寫:

<body onkeydown="getKeyCode();">

因為上面的代碼等同於:

body.onkeydown = function(){     getKeyCode();}
 
執行個體二  重寫滑鼠右鍵菜單一實例代碼:
<!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>ScriptHelper 類測試 -- 事件對象執行個體 -- 重寫滑鼠右鍵菜單</title>    <script src="http://files.cnblogs.com/zhangziqiu/ScriptHelper.js" type="text/javascript"></script>    <style type="text/css">        .cursorHand { cursor:pointer;}           .menu         {            background:#FFFFFF none repeat scroll 0 0;            border:1px solid #ACA899;            color:#000000;            font-size:12px;            position:absolute;            display:none;        }        .menu ul         {            list-style-image:none;            list-style-position:outside;            list-style-type:none;            margin:3px;            padding:3px;        }        .menu ul li        {            cursor:pointer;            margin-bottom:5px;        }             </style></head><body style="position:relative;">    <script type="text/javascript">       </script>           <div>測試文字: 歡迎訪問 http://zhangziqiu.cnblogs.com 一起學習,一起進步.</div>    <div id="mouseRightButtonMenu" class="menu" onclick="ScriptHelper.cancelBubble();">        <ul>            <li id="divMouseMenu1">查看選中內容</li>            <li><a href="http://zhangziqiu.cnblogs.com" target="_blank">返回部落格首頁</a></li>        </ul>    </div>    <script type="text/javascript">    //顯示滑鼠右鍵菜單    function showMouseRightButtonMenu()    {        ScriptHelper.cancelBubble();        var oEvent = ScriptHelper.getEvent();        var menu = document.getElementById('mouseRightButtonMenu');        if( oEvent.button == 2)        {            menu.style.display="block";            menu.style.left = oEvent.clientX + "px";            menu.style.top = oEvent.clientY + "px";                        }    }        //關閉滑鼠右鍵菜單    function closeMouseRightButtonMenu()    {        var oEvent = ScriptHelper.getEvent();        if( oEvent.button == 0 || oEvent.button == 1)        {            ScriptHelper.closeDivCommon('mouseRightButtonMenu');        }    }        //空函數,用於取消FireFox預設的滑鼠右鍵菜單    function blankMethod()    {          return false;    }         //添加滑鼠右鍵菜單的相關事件    document.onclick= blankMethod;    document.ondblclick= blankMethod;    ScriptHelper.addEventListener( document, "mousedown", showMouseRightButtonMenu );    ScriptHelper.addEventListener( document, "click", closeMouseRightButtonMenu );    ScriptHelper.addEventListener( document, "contextmenu", blankMethod );              /* 功能表項目相關函數 */            function mouseMenu1()    {        ScriptHelper.closeDivCommon("mouseRightButtonMenu");                var selectText = "未選中任何內容";        if( window.getSelection )         {            selectText = window.getSelection().toString();        }         else if(document.selection && document.selection.createRange)         {            selectText = document.selection.createRange().text;        }        if( selectText!=null && selectText!="" )        {            alert(selectText);        }     }            var divMouseMenu1 = document.getElementById("divMouseMenu1");    if( divMouseMenu1!=null)    {        ScriptHelper.addEventListener( divMouseMenu1, "mousedown", mouseMenu1 );    }    </script></body></html>
執行個體說明:

此執行個體的代碼很多. 原理就是通過事件對象判斷是否單擊了右鍵, 如果是則彈出我們自己的滑鼠右鍵菜單.

六.提示
  • IE中滑鼠左鍵代碼是1,FF是0. IE和FF滑鼠右鍵代碼都是2(oEvent.button)
  • 取消預設的滑鼠菜單, ie中重寫document.oncontentmenu方法, ff中要重寫document.click方法.
  • 滑鼠事件對象中的clientX和clientY可以擷取滑鼠的座標
  • ie中可以直接設定div的style.top和style.left屬性為數字(比如100).ff中必須在數字後加"px"(比如100px)
  • 不同的事件類型有順序: (1)mousedown (2)mouseup (3)click
七.事件對象詳解擷取

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等.

通用的事件對象資料

在IE和DOM中,事件對象帶有的資料並不完全相同.但是我認為只有完全的那些資料才是值得我們使用的.下面是一些可以在IE和DOM中使用的事件對象資料.其中假設oEvent是事件對象.

1.擷取時間類型

var eventType = oEvent.type

 

2.擷取鍵盤按鍵代碼:

需要在keydown和keyup事件中使用.

var eventKeyCode = oEvent.keyCode

3.檢測Shift,Alt,Ctrl鍵是否被按下:

        var isShift = oEvent.shiftKey;        var isAlt = oEvent.altKey;        var isCtrl = oEvent.ctrlKey;

返回的是boolean值.

4.擷取滑鼠指標座標

        var x = oEvent.clientX;        var y = oEvent.clientY;

 

八.總結

網上複雜絢麗的指令碼特效很多, 但是再複雜的特效也離不開基礎的事件和事件對象.一旦明白了原理, 相信大家的創造力可以做出來很多通用的優秀的指令碼控制項.比如下面這個網址中就有很多的特效:http://www.scriptlover.com/controls/context/ ,感謝"癡情客"在本系列的第二篇文章中提供了上面的網址.

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.