# 事件處理 ## HTML事件處理 直接添加到HTML結構中 ~~~ <button onclick="demo()">按鈕</button> <script type="text/javascript"> function demo(){ alert('html 事件處理'); } </script> ~~~ >[info] 函數需要寫在元素屬性上，修改不方便。 ## DOM 0級事件處理 把一個函數賦值給一個事件處理程序屬性 ~~~ <button id="btn" onclick="demo()">按鈕</button> <script type="text/javascript"> var btn = document.getElementById('btn'); btn.onclick = function (){ alert('DOM 0級事件處理程序'); } btn.onclick = function (){ // 這個事件處理程序會覆蓋掉上一個事件處理程序 } btn.onclick = null; // 清除一個dom0級處理程序 </script> ~~~ >[info] 無法添加多個事件處理程序 會被覆蓋 ## DOM 2級事件處理 ### 相關操作方法 ~~~ addEventListener('事件名(onclick,onmouseover)','事件處理函數','true/false'); // true:事件捕獲 false:事件冒泡 removeEventListener(); ~~~ ~~~ <button id="btn">按鈕</button> <script type="text/javascript"> var btn = document.getElementById('btn'); btn.addEventListener('click',demo); // 添加demo 2級事件 btn.addEventListener('click',demo2);// 再次添加demo 2級事件 function demo(){ console.log('DOM 2級事件處理程序'); } function demo2(){ console.log('DOM 2級事件處理程序~~~~'); } btn.removeEventListener('click',demo2); // 移除demo2的處理函數 </script> ~~~ ## IE事件處理程序 (<= IE8版本) ~~~ attachEvent // 添加事件 detachEvent // 移除事件 ~~~