下面這些客戶端 javascript代碼用到了事件,它給一個很重要的事件--“load" 事件注冊了一個事件處理程序。同時展示了注冊”click“事件處理函數更高級的一種方法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//dom2級事件語法是 addEvenLisetener("event","執行函數內容")
window.onload = function(){ //設置當頁面加載時執行
var btn =document.getElementsByTagName("button") //獲取btn元素
for( var i = 0;i<btn.length;i++){ //把每個button元素便利出來
var button = btn[i]
if(button.addEventListener){ //判斷游覽器的兼容問題,如果是ie8以下的用的是else語用代碼段裡的
button.addEventListener("click",change)
}
else{
button.attachEvent("onclick",change)
}
}
}
function change(e){ //執行函數內容
e.target.style.color ="red" //著重解釋一下e.target什麼意思 ,e代表事件, target代表元素,合起來就是事件元素指的就是被監聽到的事件目標變樣式
e.target.style.background ="black"
}
</script>
<button>按鈕一</button>
<button>按鈕二</button>
<button>按鈕三</button>
<button>按鈕四</button>
<button>按鈕五</button>
</body>
</html>