- 事件(event)是使用者對瀏覽器或網頁做出某個動作
- 事件處理程序(even handlers)定義事件發生時要做的事情(例如點擊後跳出視窗)
- 事件處理方式：
- HTML屬性的事件處理程序
- JS屬性的事件處理程序
- W3C DOM處理程序
不好的方法：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01eventHandler.html</title>
<script>
function f1() {
alert("方法一")
}
function f2() {
alert("方法二")
}
function f3() {
alert("方法三")
}
</script>
</head>
<body>
<!-- method 1 HTML屬性的事件處理程序-->
<h1 id="m1" onclick="f1();">方法一</h1><!--方法寫在上面的script中，用onclick(點擊)呼叫方法-->
<!-- method 2 JS屬性的事件處理程序-->
<h1 id="m2" \>方法二</h1>
<script>
document.getElementById("m2").onclick = f2(); //注意這一行不能寫在上面的script中，因為他會找不到標籤m2是甚麼
//document.getElementById("m2")回傳一個物件，再用「物件.屬性(onclick)」(也就是屬性事件)呼叫方法
//注意f2後面不可以有()，那樣會一開啟就執行而不是點擊後才執行(然後才執行m3那一行)
//把f2這個方法存進onclick這個屬性裡
</script>
<!-- method 3 W3 DOM處理程序-->
<h1 id="m3" >方法三</h1>
<script>
document.getElementById("m3").addEventListener("click", f3, false);
//document.getElementById("m3")是一個物件
//物件.方法(addEventListener)
//而addEventListener這個方法執行需有三個參數(最後一個可省略，後篇寫)
//addEventListener(事件名稱event,方法(把方法註冊進事件裡)function,uescapture)
//addEventListener在IE8(含)以下無法使用，要使用以下方法：
//document.getElementById("m3").attachEvent("onclick", f3)
//但這個方法IE11不支援
</script>
</body>
</html>
改進板1：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01eventHandler.html</title>
<script>
function f1() {
alert("方法一")
}
function f2() {
alert("方法二")
}
function f3() {
alert("方法三")
}
function init() {
//因為不建議把<script>寫到下面去，所以可以把下面的body加上onload來執行
//代表會先把body裡的標籤都跑過一遍再來執行此方法
document.getElementById("m2").onclick = f2;
document.getElementById("m3").addEventListener("click", f3, false);
//document.getElementById("m3").attachEvent("onclick",f3)
//↑給IE8用的老方法，IE11不認識
}
</script>
</head>
<body onload="init();">
<!--在body加上onload="init();，代表一開始就先執行標籤，之後再執行init();-->
<!--但不建議使用此方法，因為不好把介面端跟後制端分開-->
<!-- method 1 HTML屬性的事件處理程序-->
<h1 id="m1" onclick="f1();">方法一</h1>
<!--方法寫在上面的script中-->
<!-- method 2 JS屬性的事件處理程序-->
<h1 id="m2">方法二</h1>
<!-- method 3 W3 DOM處理程序-->
<h1 id="m3">方法三</h1>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>01eventHandler.html</title>
<script>
function f1(){
alert("方法一")
}
function f2() {
alert("方法二")
}
function f3() {
alert("方法三")
}
window.onload = function () {
//因為不建議把<script>寫到下面去，所以用 window.onload，代表會先執行下面body中的標籤再執行此方法
document.getElementById("m2").onclick = f2;//不要加括號，會變成一打開視窗就執行
document.getElementById("m3").addEventListener("click", f3, false);
//document.getElementById("m3").attachEvent("onclick",f3)
}
//function init() {
// document.getElementById("m2").onclick = f2;
//}
//window.onload = init;
//搞剛一點也可以這樣寫，跟上面是一樣的意思
</script>
</head>
<body>
<!-- method 1 HTML屬性的事件處理程序-->
<h1 id="m1" onclick="f1();">方法一</h1><!--方法寫在上面的script中-->
<!-- method 2 JS屬性的事件處理程序-->
<h1 id="m2" \>方法二</h1>
<!-- method 3 W3 DOM處理程序-->
<h1 id="m3" >方法三</h1>
</body>
</html>
留言列表
【前端網頁開發技術】 (4)
