下面這些客戶端 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>