Javascript的幾種事件註冊機制
1.直接綁定在元素上。這樣的缺點是結構和行為沒有分離,不符合w3c的標準。優點是,寫著方便(但是多了就不方便了)。
1 <p id="para" title="cssrain demo!" onclick="test()" >test</p>2 <script>3 function test(){4 alert("test");5 }6 </script>
2.結構和行為分離
1 <p id="para" title="cssrain demo!">test</p>2 <script>3 function test(){4 alert("test");5 }6 window.onload = function(){7 document.getElementById("para").onclick = test;8 }9 </script>
3.給一個元素繫結多個事件
1 <p id="para" title="cssrain demo!">test</p> 2 <script> 3 function test(){ 4 alert("test"); 5 } 6 7 function pig(){ 8 alert("pig"); 9 } 10 11 window.onload = function(){ 12 document.getElementById("para").onclick = test; 13 document.getElementById("para").onclick = pig; 14 } 15 </script>
如果按照上面的寫法,我們只能輸出第二個函數。 這時候我們需要用到attachEvent方法:
1 <p id="para" title="cssrain demo!">test</p> 2 <script> 3 function test(){ 4 alert("test"); 5 } 6 7 function pig(){ 8 alert("pig"); 9 } 10 11 window.onload = function(){ 12 document.getElementById("para").attachEvent("onclick",test); 13 document.getElementById("para").attachEvent("onclick",pig); 14 } 15 </script>
相容firefox
1 <p id="para" title="cssrain demo!">test</p> 2 <script> 3 function test(){ 4 alert("test"); 5 } 6 7 function pig(){ 8 alert("pig"); 9 } 10 11 window.onload = function(){ 12 var element = document.getElementById("para"); 13 if(element.addEventListener){ // firefox , w3c 14 element.addEventListener("click",test,false); 15 element.addEventListener("click",pig,false); 16 } else { // ie 17 element.attachEvent("onclick",test); 18 element.attachEvent("onclick",pig); 19 } 20 } 21 </script>
js事件註冊的相關文章:
http://blog.csdn.net/lynnlin1122/article/details/3477818