Dom綁定事件的三種方式：
1.在標籤上綁定 Dom0寫法
例1：實現功能：鼠標放在tr標籤上會變色，鼠標移開顏色消失
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1" width="300px"> <!--table的border外邊框和內邊框都管--> <tr οnmοuseοver="t1(0)" οnmοuseοut="t2(0)"> <td>1</td> <td>2</td> <td>3</td> </tr > <tr οnmοuseοver="t1(1)" οnmοuseοut="t2(1)"> <td>1</td> <td>2</td> <td>3</td> </tr> <tr οnmοuseοver="t1(2)" οnmοuseοut="t2(2)"> <td>1</td> <td>2</td> <td>3</td> </tr> </table> <script> function t1(n){ var MyTrs=document.getElementsByTagName('tr')[n]; MyTrs.style.backgroundColor='red'; } function t2(n){ var MyTrs=document.getElementsByTagName('tr')[n]; MyTrs.style.backgroundColor=''; } </script> </body> </html>
2.先獲取Dom對象，然後綁定 （一般建議使用這種方法）
實現例1的功能：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--行爲，樣式，結構相分離的頁面，即Js,css,html相互獨立，即Dom1寫法。--> <body> <table border="1" width="300px"> <!--table的border外邊框和內邊框都管--> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> <script> var MyTrs=document.getElementsByTagName('tr'); var len=MyTrs.length; for(var i=0;i<len;i++){ MyTrs[i].onmouseover=function(){ this.style.backgroundColor='red'; //this代指上面的MyTrs[i],不能用MyTrs[i]的原因是存在作用域的問題 } MyTrs[i].onmouseout=function(){ this.style.backgroundColor=''; } } </script> </body> </html>
3.獲取Dom對象，利用addEventListener函數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #main{ background-color: #ff86eb; height:350px; width:500px; } #content{ background-color: royalblue; height:150px; width:300px; } </style> <body> <div id="main"> <div id="content"></div> </div> <script> var MyMain=document.getElementById('main'); var MyContent=document.getElementById('content'); //addEventListener函數的第三個參數可以是false,true;false表示冒泡模型（程序從下到上冒泡執行）;true表示捕捉模型(從上到下正常執行) MyMain.addEventListener('click',function(){console.log('main')},false); //點擊main區域只顯示main的打印 MyContent.addEventListener('click',function(){console.log('content')},false); //點擊content區域，會顯示打印main和content </script> </body> </html>