<< 安裝獨立的 IE7 正式中文版 | 回blog首頁 | 我也來實作 PHP mix-in 的概念 - Part 3 >>

2007年03月25日

一個各家瀏覽器都可接受的事件處理器簡易寫法

如果臨時想讓各家瀏覽器都能處理 DOM 事件，又不想寫太多跨瀏覽器事件處理程式或使用額外的 JS 框架時，以下的程式碼可以參考看看。

註：這個方法是為了某些簡單的活動頁寫的，我想如果要做較為複雜的效果時，還是使用別人已經包裝好的函式庫比較好。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Event Testing</title>
<script type="text/javascript">
<!-- <![CDATA[
function someHandler(e, t, arg1, arg2) {
    var event_info = document.getElementById('event_info');
    var dom_info = document.getElementById('dom_info');
    var params = document.getElementById('params');
    
    event_info.innerHTML = '';
    for (var n in e) {
        event_info.innerHTML += '<p><strong>' + n +
                                ':<' + '/strong> ' + e[n] + '<' + '/p>';
    }

    dom_info.innerHTML = '';
        for (var n in t) {
                dom_info.innerHTML += '<p><strong>' + n +
                                      ':<' + '/strong> ' + t[n] + '<' + '/p>';
    }

    params.innerHTML = '';
    params.innerHTML += '<p><strong>arg1:<' +
                        '/strong> ' + arg1 + '<' + '/p>';
    params.innerHTML += '<p><strong>arg2:<' +
                        '/strong> ' + arg2 + '<' + '/p>';
}
// ]]> -->
</script>
</head>

<body>
<a href="#" onclick="someHandler(event, this, 'param1', 'param2');
 return false;">Show the info by eventhanlder.</a>
<h2>Info of Event Object</h2>
<div id="event_info"></div>
<h2>The Params</h2>
<div id="params"></div>
</body>
</html>

主要的原理在於 HTML Tag 中 onxxxx 的屬性可以接受 event 這個關鍵字，而它就是瀏覽器的 Event 物件。所以我們就可以將 event 當做參數，傳給相關的 Event Handler 。

另外這裡也利用 this 讓 Event Handler 可以知道是哪個 DOM 節點呼叫了它。

目前 W3C 標準與各家瀏覽器在 Event 物件上共同有的屬性如下：

  • altKey (是否按下 alt 鍵)
  • button (滑鼠的按鍵)
  • clientX (在瀏覽器可視範圍中對應的 X 軸)
  • clientY (在瀏覽器可視範圍中對應的 Y 軸)
  • ctrlKey (是否按下 ctrl 鍵)
  • screenX (在螢幕上對應的 X 軸)
  • screenY (在螢幕上對應的 Y 軸)
  • shiftKey (是否按下 shift 鍵)
  • type (事件類型)

屬性的說明請參考 W3Schools::HTML DOM Event Object 。



Posted by jaceju at 樂多Roodo! │23:50 │回應(0) │引用(0) │JavaScript
樂多分類：網路/3C 共同主題：Java/JavaScript 工具：編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/2909983
  


回最上方