Javascriptイベント登録メカニズム

Javascriptのいくつかのイベント登録メカニズム
1.要素に直接結合します.このような欠点は構造と挙動が分離されておらず、w 3 cの基準に合わないことである.長所は、便利に書いてあることです.

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> 

上記のように書くと、私達は第二の関数しか出力できません.この時に私達はatachEventの方法を使う必要があります.

 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