大家都知道事件的用法就是當某個事件(狀況)被觸發了之後就會去執行某個Function, 尤其是Javascript, 在當紅AJAX的催化下, 了解Javascript的Event用法更加重要, 在這裡就大概介紹一下Javascript的Event用法.
從W3C的發展時間軸來看, DOM(Document Object Model)的模型可以分為兩種, DOM 0 及 DOM 2. 從數字來看就可以知道DOM 0 當然是比較舊的協定, 我們可以從以下的表格來看:
DOM1 協定:
|
Event Name
|
Description
|
|
onblur()
|
The element has lost focus (that is, it is not selected by the user).
|
|
onchange0
|
The element has either changed (such as by typing into a text field) or the element has lost focus.
|
|
onclick0
|
The mouse has been clicked on an element.
|
|
ondblclick()
|
The mouse has been double-clicked on an element.
|
|
onfocus()
|
The element has gotten focus.
|
|
onkeydown()
|
A keyboard key has been pressed down (as opposed to released) while the element has focus.
|
|
onkeypress()
|
A keyboard key has been pressed while the element has focus.
|
|
onkeyup()
|
A keyboard key has been released while the element has focus.
|
|
onload()
|
The element has loaded (document, frameset, or image).
|
|
onmousedown()
|
A mouse button has been pressed.
|
|
onmousemove()
|
The mouse has been moved.
|
|
onmouseout()
|
The mouse has been moved off of or away from an element.
|
|
onmouseover()
|
The mouse has moved over an element.
|
|
onmouseup()
|
A mouse button has been released.
|
|
onreset()
|
The form element has been reset, such as when a form reset button is pressed.
|
|
onresize()
|
The window’s size has been changed.
|
|
onselect()
|
The text of a form element has been selected.
|
|
onsubmit()
|
The form has been submitted.
|
|
onunload()
|
The document or frameset has been unloaded.
|
DOM2 的進化:
|
DOM 0 Event
|
DOM 2 Event
|
|
onblur()
|
blur
|
|
onfocus()
|
focus
|
|
onchange()
|
change
|
|
onmouseover()
|
mouseover
|
|
onmouseout()
|
mouseout
|
|
onmousemove()
|
mousemove
|
|
onmousedown()
|
mousedown
|
|
onmouseup()
|
mouseup
|
|
onclick()
|
click
|
|
ondblclick()
|
dblclick
|
|
onkeydown()
|
keydown
|
|
onkeyup()
|
keyup
|
|
onkeypress()
|
keypress
|
|
onsubmit()
|
submit
|
|
onload()
|
load
|
|
onunload()
|
unload
|
新的DOM2 用法可以addEventListener()這個函數來觀察到:
addEventListener(event,function,capture/bubble);
參數event如上表所示, function是要執行的函數, capture與bubble分別是W3C制定得兩種時間模式,簡單來說capture就是從document的開始讀到最後一行, 再執行事件, 而bubble則是先尋找指定的位置再執行事件.
capture/bubble的參數是布林值, True表示用capture, False則是bubble.Windows Internet Explorer也有制定一種EventHandler, 是 attachEvent(), 格式如下:
window.attachEvent("submit",myFunction());
比較特別的是attachEvent不需要指定capture/bubble的參數, 因為在windows IE環境下都是使用Bubble的模式.這裡用圖像的Rollover例子來表現事件的用法:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rollover</title>
<script type="text/javascript">function moveOver(imgObj) {
if (typeof window.addEventListener != "undefined") {
imgObj.addEventListener("mouseover",function(){imgObj.src = imgObj.id +
"_over.png";}, false);
imgObj.addEventListener("mouseout", function(){imgObj.src = imgObj.id +
"_default.png";}, false);
} else {
imgObj.attachEvent("onmouseover",function(){imgObj.src = imgObj.id +
"_over.png";});
imgObj.attachEvent("onmouseout", function(){imgObj.src = imgObj.id +
"_default.png";});
}
}
function rollover() {
var images = document.getElementsByTagName("img");
var roll = new RegExp ("rollover");
var preload = [];
for (var i = 0; i < images.length; i++) {
if (images[i].id.match(roll)) {
preload[i] = new Image();
preload[i].src = images[i].id + "_over.png";
moveOver(images[i]);
}
}
}
if (typeof window.addEventListener != "undefined") {
window.addEventListener("load",rollover,false);
} else {
window.attachEvent("onload",rollover)
}
</script>
</head>
<body>
<p><img id="rollover_home" name="img_home" src="rollover_home_default.png"
alt="Home"></p>
<p><img id="rollover_about" name="img_about" src="rollover_about_default.png"
alt="About"></p>
<p><img id="rollover_blog" name="img_blog" src="rollover_blog_default.png"
alt="Blog"></p>
<p><img id="logo" name="img_logo" src="logo.png" alt="Braingia Logo"></p>
</body>
</html>
上述的 typeof window.addEventListener != "undefined" 程式碼可以判斷使用者的瀏覽器是否支援AddEventListener這個事件模型, 如果不支援就使用attachEvent.
W3C 及 IE 同時支援移除指定的事件, 用途是移除設定的事件, 格式分別如下:
W3C格式:
removeEventListener(event,function,capture/bubble);
Windows IE的格式如下:
detachEvent(event,function);
資料參考: Chapter 14 – Browsers and JavaScript, JavaScript Step by Step, by Steve Suehring
