如果臨時想讓各家瀏覽器都能處理 DOM 事件，又不想寫太多跨瀏覽器事件處理程式或使用額外的 JS 框架時，以下的程式碼可以參考看看。
註：這個方法是為了某些簡單的活動頁寫的，我想如果要做較為複雜的效果時，還是使用別人已經包裝好的函式庫比較好。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <!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>';<br /> }<br />
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 物件上共同有的屬性如下：
屬性的說明請參考 W3Schools::HTML DOM Event Object 。