HTML DOM 快速導覽 - HTML 元素的事件處理屬性

HTML 元素 (element) 的事件處理屬性 (attribute) 如下列表

HTML 元素的事件處理屬性
名稱描述
oncopy拷貝
oncut剪下
onpaste貼上
onblur離開焦點
onchange更改
onclick點擊
ondbclick雙重點擊
onfocus進入焦點
onkeydown按住按鍵
onkeypress按按鍵
onkeyup釋放按鍵
onmousedown按住滑鼠
onmousemove滑鼠移動
onmouseout滑鼠離開目標元素
onmouseover滑鼠進入目標元素
onmouseup釋放滑鼠
onmousewheel滾動滑鼠滾輪
onresize調整瀏覽器視窗大小
onscroll使用滑鼠滾輪
ondrag滑鼠「拖」
ondrop滑鼠「放」
onload載入網頁


舉例如下
?
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
function run1() {
    var s = document.getElementById("show1");
    s.innerHTML = "Mouse down!";
}
 
function run2() {
    var s = document.getElementById("show1");
    s.innerHTML = "Mouse up!";
}
 
function run3(event) {
    var demo_x = document.getElementById("x");
    var demo_y = document.getElementById("y");
    demo_x.innerHTML = event.clientX;
    demo_y.innerHTML = event.clientY;
}
 
function run4() {
    var s = document.getElementById("show2");
    s.innerHTML = "Mouse out!";
}
 
function run5() {
    var s = document.getElementById("show2");
    s.innerHTML = "Mouse over!";
}
 
function run6() {
    var s = document.getElementById("show1");
    s.innerHTML = "Mouse wheel!";
}
 
/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：event023.js
     功能：示範 JavaScript 程式
     作者：張凱慶
     時間：西元 2011 年 8 月 */


我們以下面的 HTML 文件載入
?
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
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="event023.js" type="text/javascript"></script>
<style>
.example {
    width: 400px;
    height: 300px;
    border: thin solid black;
}
</style>
</head>
<body>
<div class="example"
     onmousedown="run1();"
     onmouseup="run2();"
     onmousemove="run3(event);"
     onmouseout="run4();"
     onmouseover="run5();"
     onmousewheel="run6();">
</div>
<div id="show1"></div>
<div id="show2"></div>
<div>x: <span id="x"></span>
y: <span id="y"></span></div>
</body>
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：event023.html
     功能：示範 JavaScript 程式
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


其中的 <div> 元素設置多個事件處理屬性
15
16
17
18
19
20
21
22
<div class="example"
     onmousedown="run1();"
     onmouseup="run2();"
     onmousemove="run3(event);"
     onmouseout="run4();"
     onmouseover="run5();"
     onmousewheel="run6();">
</div>


此例按下滑鼠按鍵執行 run1() ，釋放滑鼠按鍵執行 run2() ，移動滑鼠執行 run3() ，滑鼠移開目標元素執行 run4() ，滑鼠進入目標元素執行 run5() ，滾動滑鼠滾輪執行 run6() ，瀏覽器 (broswer) 開啟網頁檔案，於 <div> 元素框框內移動滑鼠就會印出滑鼠座標



中英文術語對照
元素element
屬性attribute
瀏覽器broswer


您可以繼續參考
HTML 元素的事件處理屬性


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/element#Event_Handlers
http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#elements-in-the-dom
http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#event-handlers
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)