元素绑定事件、解绑事件以及兼容性代码

为元素绑定事件

1.对象.addEventListener(“事件类型”, “事件的处理函数”, false(默认值)) ie8不支持 2. 对象.attachEvent(“有on的事件类型”, 事件处理函数) 谷歌, 火狐不支持 是ie特有的方法

为任意元素, 绑定任意的事件, 执行任意的处理函数

function addEventListener(element, type, fn) { if(element.addEventListener){ element.addEventListener(type, fn, false); }else if(element.attachEvent){ element.attachEvent("on" + type, fn); }else{ element["on"+type] = fn; } }

为元素解绑事件 法一

my$("btn1").onclick = function () { console.log(777); } my$("btn2").onclick = function () { //解绑第一个按钮的事件--->法一 : 直接重新赋值为null my$("btn1").onclick = null; }

法二 removeEventListener(不带on的事件类型, 解绑的事件函数, false)—>ie8不支持 法三 detachEvent(“带on的事件类型”, 要解绑的函数名)---->ie8特有的方法, 其他浏览器不支持

为任意一个元素解绑对应的事件

function removeEvent(element, type, fnName) { if(element.removeEventListener){ element.removeEventListener(type, fnName, false); }else if(element.detachEvent){ element.detachEvent("on" + type, fnName); }else{ element["on" + type] = null; } }

注意: 用什么方式绑定的事件, 就要用对应的方式去解绑

对象.on事件名 = 处理函数 对象.on事件名 = null

对象.addEventListener(没有on的事件类型, 回调函数, false) 对象.removeEventListener(没有on的事件类型, 要解绑的函数名, false)

对象.attachEvent(有on的事件类型, 回调函数) 对象.detachEvent(有on的事件类型, 要解绑的函数名)