事件處理器

HTML 事件可以是瀏覽器行為，也可以是用戶行為。
以下是HTML 事件的實例：

HTML 頁面完成加載
HTML input 字段改變時
HTML 按鈕被點擊

在事件觸發時JavaScript 可以執行一些代碼。

定位與用法

事件處理器通常放在表單元素, 鏈結標籤, 或 BODY 起始標籤中。例如 onClick 事件處理器放在表單的按紐中, 其確實位置如下:

<html>
<body>
<form>
<input type="button" onClick="window.alert('Hi!');">
</form>
</body>
</html>

當滑鼠點按按紐後, 會啟動 onClick 事件處理器, 此例是彈出一個訊息方塊。

例題:pr7_1.html

假如要處理的工作較多, 也可以使用函式, 如

<html>
<head>
<title>Events & Functions</title>
<SCRIPT language="JavaScript">
<!--
    function hi_and_bye()
    {
        window.alert('Hi!');
        window.alert('Bye!');
    }
//-->
</SCRIPT>
</head>
<body>
<form>
<input type="button" onClick="hi_and_bye();">
</form>
</body>
</html>

事件處理器

click 事件(onClick)

<html>
<head>
<title>Events & Functions</title>
</head>
<body>
<form>
<input type="button" value="Do not click here"
       onClick="window.alert('I told you not to click me!');">
</form>
</body>
</html>

事件處理器通常放在鏈結標籤中

<html>
<body>
<form>
<a href="http://none"
   onClick="window.alert('Hey! You click me!'); return false;">
Don't Click Me!</a>
</form>
</body>
</html>

mouseover 事件(onMouseOver)

<a href="http://www.pageresource.com"
   onMouseOver="window.alert('I told you not to click me!');">
Don't Try Clicking Me!</a>

例題:pr7_2.html

mouseout 事件(onMouseOut)

<a href="http://none"
   onMouseOut="window.alert('What, you didn\'t like my link?');">
Click Me!</a>

load 事件(onLoad)

<body onLoad="window.alert('I\'m done loading now!');">
<B>Text for the body of the page.</B>
</body>

unload 事件(onUnload)

<body onUnload="window.alert('Be sure to come back, OK?');">
<B>Text for the body of the page.</B>
</body>

focus 事件(onFocus)

<form>
<input type="text" onFocus="window.alert('Don\'t forget to capitalize!');">
</form>

blur 事件(onBlur)

<form>
Give this box focus:<BR>
<input type="text" onBlur="window.alert('Hey, Come back!');">
<BR>
Then give this box to blur the first one:<BR>
<input type="text">
</form>

change 事件(onChange)

<html>
<body>
<form>
Are you cool?<BR>
<select onChange="window.alert('Why did you change that?');">
<option selected>yes</option>
<option>no</option>
<option>undecided</option>
</select>
</form>
</body>
</html>

submit 事件(onSubmit)

<html>
<body>
<form onSubmit="window.alert('Thank you!');">
What's your name?<BR>
<input type="text" name="thename">
<BR>
<input type="submit">
</form>
</body>
</html>

其他的事件

abort 事件(onAbort)

dragdrop 事件(onDragDrop)

error 事件(onError)

keydown 事件(onKeyDown)

keypress 事件(onKeyPress)

keyup 事件(onKeyUp)

mousedown 事件(onMouseDown)

mouseup 事件(onMouseUp)

mousemove 事件(onMouseMove)

move 事件(onMove)

reset 事件(onReset)

resize 事件(onResize)

select 事件(onSelect)

事件處理器的 script

改變狀態列內容

<a href="pr7_2.html"
 onMouseOver="window.status='My last project'; return true;"
 onMouseOut="window.status=''; return true;" >
Events</a>

鏈結按紐

使用 window.location 屬性, 可以將一個表單按紐轉成鏈結, 如

<form>
<input type="button" value="Go Searching!"
       onClick="window.location='http://www.google.com';">
</form>

在一個表單中,也可以使用多個鏈結按紐:

<form>
<input type="button" value="Go Searching!"
       onClick="window.location='http://www.google.com';">
<P>
<input type="button" value="Html Help!"
       onClick="window.location='http://www.pageresource.com';">
<P>
<input type="button" value="Some Javascripts!"
       onClick="window.location='http://www.javascriptcity.com';">
</form>

使用大量的鏈結按紐時,可以利用函式, 並以URL作為函式的參數:

<html>
<head>
<title>Button Links</title>
<SCRIPT language="JavaScript">
<!--
    function go_to(place)
    {
        window.location=place;
    }
//-->
</SCRIPT>
</head>
<body>
<form>
<input type="button" value="Go Searching!"
       onClick="go_to('http://www.google.com');">
<P>
<input type="button" value="Html Help!"
       onClick="go_to('http://www.pageresource.com');">
<P>
<input type="button" value="Some Javascripts!"
       onClick="go_to('http://www.javascriptcity.com');">
</form>
<body>

例題:pr7_6.html