首页 > 代码库 > DOM0级事件处理、DOM2级事件处理

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

2024-08-17 07:16:28   217人阅读

 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="http://www.mamicode.com/按钮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="http://www.mamicode.com/按钮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="http://www.mamicode.com/按钮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>

 

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


联系
我们