DOM0级事件处理、DOM2级事件处理

 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>

 

上一篇:windows下使用msys2编译FFmepg源码


下一篇:windows的两种sshd服务器安装