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>
