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>
时间： 2024-12-13 04:58:18