zoukankan html css js c++ java

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>

查看全文

相关阅读:
Mac php使用gd库出错 Call to undefined function imagettftext()
centos 使用 locate
Mac HomeBrew 安装 mysql
zsh 命令提示符 PROMPT
新的开始
 Java 面试题分析
 Java NIO Show All Files
正确使用 Volatile 变量
 面试题整理 2017
有10阶梯, 每次走1,2 or 3 阶,有多少种方式???

原文地址：https://www.cnblogs.com/zylq-blog/p/7007605.html