# 事件处理 ## 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 // 移除事件 ~~~