Javascript 事件觸發(Event Binding)的方式整理
事件觸發(Event Binding)的方式 (註：紅色斜體字寫碼時自行替換)
1. Element Attributes
[語法]
<html>
<head>
<title>......</title>
<script language="JavaScript">
<!--
function function-name(parameters) {
......
}
// -->
</script>
</head>
<body>
<html-tag other-attributes event-handler="function-name(arguments);">......</html-tag>
</body>
</html>
[說明]
‧利用 Element Attributes 的方式觸發定義在 <head> 區段內 <script> 標籤區塊內的 function。
‧此種方式可藉由傳遞特殊的參數值(this 關鍵字) 給事件處理函數(event handler's function)。
[範例]
<script language="JavaScript">
function convertToUpper(mytextbox) {
mytextbox.value = mytextbox.value.toUpperCase();
}
</script>
......
<FORM ....>
<INPUT type="text" name="first_name" onChange="convertToUpper(this)">
<INPUT type="text" name="last_name" onChange="convertToUpper(this)">
......
</FORM>
2. Object Properties
[說明]
‧利用 script 程式碼將 event 與某個 element object 作連結。
‧此種方式的 tag 屬性(attribute) 的狀態名稱(property name) 須為小寫字母，如 onmouseover(NN4 的狀態名稱可接受 interCap 方式)。
‧當指派某個 function 參考到 event property，只須指定 function 名稱，function 名稱後不用接 () 括號和該 function 的定義。
[範例]
document.forms[0].myButton.onclick = myFunc;
3. 利用 IE 的 <script for>
[說明]
‧利用 tag 的 FOR 和 EVENT 屬性作事件連結(並非 W3C 制定的標準)。
‧FOR 的屬性值設定與某 html 元件的 ID 值，然後在 EVENT 屬性值中設定所要觸發的事件名稱(onmouseover, onclick等)。
‧此種方式的 script 程式碼並非定義在 function 內，而是定義在 <script> 標籤內。
[範例]
<INPUT type="button" name="myButton" id="button1" value="Click Here">
<script for="button1" event="onclick">
...... // script 程式碼
</script>
[範例]
<span id="testscript">Click me script block handler - JScript</span>
<script language="JScript" for="testscript" event="onclick">
alert("script block handler - JScript");
</script>
4. 使用 IE5+ 的 attachEvent() 方式(只適用 IE5+)
[語法] element-object.attachEvent("event-name", function-reference);
參數 event-name 的值為字串型態的事件名稱(event name)，例如 onmousedown。
參數 function-reference 為因事件所觸發連結的 function，function 後不用接括號()，直接使用 function 名稱即可。
[說明]
‧利用 IE5+ 的 attachEvent() 方法可作事件觸發。
‧此種方式的限制為：瀏覽器載入此 element's tag 前無法執行該 javascript 程式碼。因此此種事件觸發控制的程式碼通常寫在 html 文件的結尾處，或在 body 元件中利用 onLoad 函式指定事件觸發處理程式。
[範例]
document.all.button1.attachEvent("onclick", myFunc);
[範例]
document.getElementById("button1").attachEvent("onclick", myFunc);
5. 指定 tag 的 id 值與事件關係(只適用 IE)
[語法] function tag-id.event-name( ) { ...... }
或
function tag-id::event-name( ) { ...... }
[說明]
‧IE 可直接利用設定 function 的名稱來觸發事件。
‧function 名稱設定方式為「id名稱.事件名稱」或「id名稱 ::事件名稱」。
[範例]
<span ID="sixties" >Hello World!!</span>
<script>
function sixties.onmousemove() {
event.srcElement.style.color=Math.floor(Math.random()*16777216);
}
</script>
[範例]
<script type="text/JScript">
function window::onload(){
alert("Hello!");
}
function window.onbeforeunload(){
alert("Goodbye!");
}
</script>
6. W3C 制定的 DOM -- addEventListener() Method
[語法] node-reference.addEventListener("event-type", listener-reference, capture-flag);
W3C DOM 制定的規格中，參數 event-type 為事件型態(前面不加"on")，例如 click、mousedown，和 keypress 等。
參數 capture-flag 為 Boolean 值(通常為false)-- 此方法稱為 event propagation。
[說明]
‧Netscape 6 採用 W3C DOM Level 2 的 event binding 機制，類似 IE5∕Windows 的 attachEvent() 函數。
‧W3C DOM 在 DOM 的階層架構(hierarchy)下可指派每一 node 的 addEventListener()。
‧當某個 html 標籤屬於 DOM node 型態時(包含在 element's tag 內的，如 text node)，皆可做事件觸發。
[範例] 改寫 <body onload="dothis()"> 為跨 browser 寫法<script type="text/javascript">
if (window.addEventListener) { // DOM method for binding an event
window.addEventListener("load", dothis, false);
} else if (window.attachEvent) { // IE exclusive method for binding an event
window.attachEvent("onload", dothis);
} else if (document.getElementById) { // support older modern browsers
window.onload=dothis;
}
</script>
沒有留言:
張貼留言