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>