事件綁定 · JavaScript學習記錄

### 事件綁定 - IE 方式： - `attachEvent(事件名稱, 函數)`，綁定事件處理函數 - `detachEvent(事件名稱, 函數)`，接觸綁定 - DOM 方式：不兼容 IE7 - `addEventListener(事件名稱, 函數, 捕獲)` - `removeEventListener(事件名稱, 函數, 捕獲)` - 何時使用綁定 - 綁定事件和 `this` - 綁定匿名函數，會無法刪除 - 代碼： ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>事件綁定</title> <link rel="stylesheet" href="../reset.css"> <style> #div1 { width: 200px; height: 200px; position: absolute; background-color: rgb(255, 0, 0); } </style> <script> // 封裝 getElementById 函數 function get(id) { return document.getElementById(id); } // 封裝 attachEvent 兼容性函數 function myAddEvent(obj, ev, fn) { if (obj.attachEvent) { obj.attachEvent('on'+ ev, fn); } else { obj.addEventListener(ev, fn , false); } } window.onload = function () { var oDiv = get('div1'); var btn = get('btn'); myAddEvent(btn, 'click', function () { console.log('event'); oDiv.style.display = 'none'; }) myAddEvent(btn, 'click', function () { console.log('event2'); setTimeout(function () { oDiv.style.display = 'block'; }, 1000); }) } </script> </head> <body> <input type="button" id="btn" value="按鈕"> <div id="div1"></div> </body> </html> ```