1.HTML事件處理
直接添加到HTML結構中
缺點：修改一處同時需要修改兩處 函數的名稱如果被修改，html中的onclick事件也要修改。
如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件處理</title>
</head>
<body>
<div id="div">
<button id="btn" οnclick="demo()">按鈕</button>
</div>
<script>
function demo () {
alert("Hello html事件處理");
}
</script>
</body>
</html>
2.DOM 0級事件處理
把一個函數值賦給一個時間處理程序屬性
優點：不需要修改HTML中的button 只需修改一處
缺點：如果有多個事件 會被覆蓋掉 只會顯示最後一個事件
如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件處理</title>
</head>
<body>
<div id="div">
<button id="btn">按鈕</button>
</div>
<script>
var btn1=document.getElementById("btn");
btn1.οnclick=function () {
alert("dom0級事件處理程序1");
}
btn1.οnclick=function () {
alert("dom0級事件處理程序2"); //會覆蓋掉dom 事件處理程序1
}
// btn1.οnclick=null; //清楚當前事件
</script>
</body>
</html>
3.DOM 2級事件處理
優點：不會被覆蓋掉 使用起來很方便 符合用戶的使用心得
addEventListener（“事件名”，“事件處理函數”，“布爾值”）；
true：事件捕獲
false：事件冒泡
remove EventListener（）； //移除事件
如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件處理</title>
</head>
<body>
<div id="div">
<button id="btn">按鈕</button>
</div>
<script>
var btn1=document.getElementById("btn")
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
btn1.addEventListener("click",demo3);
function demo1() {
alert("DOM 2級事件處理程序1");
}
function demo2() {
alert("DOM 2級事件處理程序2");
}
function demo3() {
alert("DOM 2級事件處理程序3");
}
btn1.removeEventListener("click",demo2);
//移除demo2；
</script>
</body>
</html>
4.IE事件處理程序(使用方法和參數和addEventListener一樣)
attachEvent
detachEvent（移除事件）
如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件處理</title>
</head>
<body>
<div id="div">
<button id="btn">按鈕</button>
</div>
<script>
var btn1=document.getElementById("btn")
if (btn1.addEventListener) {
btn1.addEventListener("click",demo);
}else if (btn1.attachEvent){
btn1.attachEvent("onclick","demo");
}else{
btn1.οnclick=demo();
//以前有些瀏覽器只能支持DOM 0級事件 所以這裏添加一個DOM 0 級事件
}
function demo () {
alert("Hello");
}
</script>
</body>
</html>
