首頁 > 開發者 > JavaScript
標籤：round 優點 ntb add meta ack str document click
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>
javascript學習筆記（七）：事件詳解
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
