萬盛學電腦網 >> 腳本專題 >> javascript >> DOM基礎教程之事件類型
DOM基礎教程之事件類型
對於用戶事件類型而言，最常用的是鼠標、鍵盤、浏覽器。
1.鼠標事件：
鼠標的事件都頻繁使用，下面例子就測試各種鼠標事件
代碼如下:
<script language="javascript">
function handle(oEvent) {
var disp = document.getElementById("display");
if (window.event) oEvent = window.event; //處理兼容性，獲得對象
disp.innerHTML += "鼠標事件名稱：" + oEvent.type + "<br>";
}
window.onload = function() {
var oP = document.getElementById("box");
oP.onmousedown = handle;
oP.onmouseover = handle;
oP.onmouseup = handle;
oP.onmouseout = handle;
oP.onclick = handle;
oP.ondblclick = handle;
}
</script>
<div>
<div id="box" style="width:100px;height:100px;background:#ddd;">
box內容
</div>
<p id="display"></p>
</div>
鼠標的鍵值button測試（附對照表）
代碼如下:
<script language="javascript">
function TestClick(oEvent) {
var oDiv = document.getElementById("display");
if (window.event)
oEvent = window.event;
oDiv.innerHTML += oEvent.button; //輸出button的值
}
document.onmousedown = TestClick;
window.onload = TestClick; //測試未按下任何鍵
</script>
<div>
<p id="display"></p>
</div>
2.鍵盤事件
鍵盤事件種類不多，僅三種事件。
keydown（按下某鍵，一直按住會持續觸發）
keypress（按下某鍵並產生字符時觸發，即忽略Shift、Alt，ctrl等功能鍵）
keyup（釋放某個鍵時觸發）
鍵盤監聽示例：
代碼如下:
<script language="javascript">
function handle(oEvent) {
if (window.event) oEvent = window.event; //處理兼容性，獲得事件對象
var oDiv = document.getElementById("display");
oDiv.innerHTML += oEvent.type + " "; //輸出事件名稱
}
window.onload = function() {
var oTextArea = document.getElementById("textin");
oTextArea.onkeydown = handle; //監聽所有鍵盤事件
oTextArea.onkeyup = handle;
oTextArea.onkeypress = handle;
}
</script>
<div>
<textarea rows="4" cols="50" id="textin">
</textarea>
<p id="display"></p>
</div>
對於鍵盤而言，最重要的不是事件的名稱，而是所按的是什麼鍵。由於ie沒有charCode屬性，而keyCode只有在keydown、keyup事件發生的時才與標准dom的keycode相同，
在keypress事件中等同於keycode，因此采用以下方法。
代碼如下: oEvent.charCode = (oEvent.type == "keypress")?oEvent.keycode:();
之所以不采用keyCode是因為它表示鍵盤按鍵，而不是輸出的字符，因此，輸出“a”和“A”，keycode是等值的，charcode則以字符區分。
另外在keypress中，標准dom的keycode值始終為0；
例子：鍵盤事件的相關屬性：
代碼如下:
<script language="javascript">
function handle(oEvent) {
var oDiv = document.getElementById("display");
if (window.event) oEvent = window.event; //處理兼容性，獲得事件對象
//設置ie charcode的值
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
oDiv.innerHTML += oEvent.type + "：charCode" + oEvent.charCode + "keyCode" + oEvent.keyCode + "<br>"; //輸出測試
}
window.onload = function() {
var oTextArea = document.getElementById("textin");
oTextArea.onkeydown = handle; //監聽所有鍵盤事件
oTextArea.onkeypress = handle;
}
</script>
<div>
<textarea rows="4" cols="50" id="textin">
</textarea>
<p id="display"></p>
</div>
3.htm事件
對於浏覽器而言，各種html有著自己的事件，有一些也是用戶常常接觸到的，比如load，error，select等，常用的html事件如下：
load事件是常用的事件之一，因為在頁面載入完成之前，dom的框架還沒有搭建完成，因此任何相關操作都不能發生。
給window對象分配load，unload事件等同於<body>標記的onload和onunload方法。
javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved