js 中用Dom2級事件處理函數(改變樣式)

時間 2019-12-11

標籤中用 dom2 dom 事件處理函數改變樣式欄目 JavaScript 简体版

原文原文鏈接

下面這些客戶端 javascript代碼用到了事件，它給一個很重要的事件--「load" 事件註冊了一個事件處理程序。同時展現了註冊」click「事件處理函數更高級的一種方法javascript

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 <script>
 9     //dom2級事件語法是 addEvenLisetener("event","執行函數內容")
10     window.onload = function(){    //設置當頁面加載時執行
11         var btn =document.getElementsByTagName("button") //獲取btn元素
12         for( var i = 0;i<btn.length;i++){   //把每一個button元素便利出來
13             var button = btn[i]             
14             if(button.addEventListener){    //判斷遊覽器的兼容問題，若是是ie8如下的用的是else語用代碼段裏的
15                 button.addEventListener("click",change)
16             }
17            else{
18                 button.attachEvent("onclick",change)
19             }
20 
21         }
22     }
23         function change(e){        //執行函數內容       
24             e.target.style.color ="red"     //着重解釋一下e.target什麼意思  ，e表明事件， target表明元素，合起來就是事件元素指的就是被監聽到的事件目標變樣式
25             e.target.style.background ="black"
26         }
27 </script>
28 <button>按鈕一</button>
29 <button>按鈕二</button>
30 <button>按鈕三</button>
31 <button>按鈕四</button>
32 <button>按鈕五</button>
33 </body>
34 </html>