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>

查看全文

相关阅读:
python+opencv实现图像自适应阈值的均衡化
 ubuntu添加新的分辨率选项（干货）
python+opencv检测图像清晰度
 python根据列表创建文件夹，拷贝指定文件
 牛客多校Round 4
牛客多校Round 3
HDU多校Round 2
HDU多校Round 1
牛客多校Round 2
牛客多校Round 1

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