事件绑定 · 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> ```