javascript学习笔记（七）：事件详解

HTML事件处理

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta chaset="UTF-8">
 5     <title></title>            
 6 </head>    
 7 <body>
 8     <button onclick="demo()">按钮</button>
 9     <script>
10         function demo(){
11             alert("html事件处理");//缺点是修改一处就要修改两处
12         }
13     </script>
14 </body>
15 </html>

DOM 0级事件处理

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta chaset="UTF-8">
 5     <title></title>            
 6 </head>    
 7 <body>
 8     <div>
 9         <button id="btn">按钮</button>
10     </div>
11     <script>
12         var btn = document.getElementById("btn");
13         btn.onclick = demo;            //DOM 0级事件处理
14         btn.onclick = demo2;        //有个弊端是后面的语句会覆盖前面的语句，这里只弹demo2窗。
15         function demo(){
16             alert("DOM 0级事件处理");
17         }
18         function demo2(){
19             alert("DOM 0级事件处理2");
20         }
21     </script>
22 </body>
23 </html>

DOM 2级事件处理

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta chaset="UTF-8">
 5     <title></title>            
 6 </head>    
 7 <body>
 8     <div>
 9         <button id="btn">按钮</button>
10     </div>
11     <script>
12         var btn = document.getElementById("btn");
13         btn.addEventListener("click",demo);        //添加DOM 2级事件
14         btn.addEventListener("click",demo2);    //相对DOM 0级事件的优点是不会覆盖上面的事件，依次弹窗两次
15         btn.removeEventListener("click",demo);    //清除DOM 2级事件
16         
17         function demo(){
18             alert("DOM 2级事件处理");
19         }
20         function demo2(){
21             alert("DOM 2级事件处理2");
22         }
23 
24     </script>
25 </body>
26 </html>