DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> js 中用Dom2級事件處理函數(改變樣式)
js 中用Dom2級事件處理函數(改變樣式)
編輯:JavaScript基礎知識     

下面這些客戶端 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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved