1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>DOM事件</title> 6 </head> 7 <body> 8 <!-- 此为HTML事件，因为在HTML代码中 添加了onclick代码 --> 9 <input type="button" value="按钮1" id="btn1" onclick="fun1()" /> 10 <script type="text/javascript"> 11 function fun1(){ 12 alert("hello world!"); 13 } 14 </script> 15 16 17 18 <!-- 此为DOM0级事件，不在HTML代码中添加事件，通过属性添加事件 --> 19 <input type="button" value="按钮2" id="btn2" > 20 <script type="text/javascript"> 21 //1.第一步首先获取元素 22 var p=document.getElementById("btn2"); 23 //2.第二步通过属性添加时间的函数 24 p.onclick=function (){ 25 alert("这是DOM0级事件"); 26 } 27 //3.通过此语句可以删除事件 28 //p.onclick=null;//此为删除事件 29 </script> 30 31 32 33 <!--此为DOM2级事件，同样不在HTML代码中添加时间，用函数添加事件--> 34 <input type="button" value="按钮3" id="btn3"> 35 <script type="text/javascript"> 36 //1.第一步首先获取元素 37 var x=document.getElementById("btn3"); 38 //2.第二步通过创建函数 39 function fun3(){ 40 alert("这是DOM2级事件"); 41 } 42 //然后通过函数 ↓事件 ↓函数名 ↓ture表示按捕获事件 43 // false按冒泡事件， 44 x.addEventListener("click", fun3, false);//false兼容个浏览器 45 //注意时间其实为onclick，但是DOM2级不能加on，只写后面就可以了。 46 </script> 47 48 <!-- 49 三种事件的比较，DOM2级事件相比于HTML事件更容日后期维护 50 --> 51 </body> 52 </html>