js绑定事件和解绑事件
2017-04-27 09:17
531 查看
在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性
attachEvent方法 只支持IE678,不兼容其他浏览器
addEventListener方法 兼容火狐谷歌,不兼容IE8及以下
addEventListener方法
div.addEventListener('click',fn); div.addEventListener('click',fn2); function fn(){ console.log("春雨绵绵"); } function fn2(){ console.log("到处潮湿"); }
attachEvent方法
div.attachEvent('onclick',fn); div.attachEvent('onclick',fn2); function fn(){ console.log("春雨绵绵"); } function fn2(){ console.log("到处潮湿"); }
注意点:attachEvent方法绑定的事件是带on的,addEventListener绑定的事件是不带on的
下面我写了一个兼容了IE和火狐谷歌的方法
var div=document.getElementsByTagName("div")[0]; addEvent('click',div,fn) function addEvent(str,ele,fn){ ele.attachEvent?ele.attachEvent('on'+str,fn):ele.addEventListener(str,fn); } function fn(){ console.log("春雨绵绵"); }
这样就完美的解决了兼容性的问题
有绑定事件的话,那就肯定有解绑事件,但是解绑事件和绑定事件一样,万恶的IE还是会搞特殊化
detachEvent方法 只支持IE678,不兼容其他浏览器
removeEventListener方法 兼容火狐谷歌,不兼容IE8及以下
detachEvent方法写法:
ele.detachEvent("onclick",fn);
removeEventListener的写法:
ele.removeEventListener("click",fn);
下面我写了一个兼容性的方法给大家参考,实现也是很简单
function remove(str,ele,fn){ ele.detachEvent?ele.detachEvent("on"+str,fn):ele.removeEventListener(str,fn); }
注意点:不管是绑定事件attachEvent还是删除事件detachEvent都是要加on的,removeEventListenser和addEventListenser则不需要加on
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家
您可能感兴趣的文章:
相关文章推荐
- js绑定事件和解绑事件
- 原生js绑定和解绑事件,兼容IE,FF,chrome
- 有关js事件的绑定和解绑
- 7-20 jquery遍历节点,bootstrap模态框绑定事件和解绑,mock.js,model.urlroot,id,打基础
- 7 HTML&JS等前端知识系列之jquery的事件绑定
- JS绑定事件的三种方式
- js事件绑定
- JS学习笔记-事件绑定
- 【JS难题】循环内绑定对象事件
- JS事件调试 - 查找HTML元素绑定的事件以及绑定代码所在位置
- js 事件绑定函数与this的使用
- JS实现动态绑定单击事件给节点添加样式
- JS 事件基础 事件绑定函数
- js 事件绑定的方法bind(),on(),off()
- js 事件绑定的方法
- vb与js中IE中隐含事件绑定
- js事件绑定
- 关于js动态生成元素,注册(绑定)的事件失效的解决(on)
- 将多个js函数绑定到onload事件上
- js循环绑定事件