详解js中的绑定事件和解绑事件-js教程-PHP中文网

详解js中的绑定事件和解绑事件

零下一度

发布： 2017-04-28 09:48:25

原创

1769人浏览过

本篇文章主要介绍了js绑定事件和解绑事件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性

attachEvent方法只支持IE678,不兼容其他浏览器

addEventListener方法兼容火狐谷歌,不兼容IE8及以下

addEventListener方法

p.addEventListener('click',fn);

p.addEventListener('click',fn2);
function fn(){ console.log("春雨绵绵"); }

function fn2(){
        console.log("到处潮湿");
      }

登录后复制

attachEvent方法

p.attachEvent('onclick',fn);
p.attachEvent('onclick',fn2);
function fn(){ console.log("春雨绵绵"); }
function fn2(){
        console.log("到处潮湿");
      }

登录后复制

注意点:attachEvent方法绑定的事件是带on的,addEventListener绑定的事件是不带on的

下面我写了一个兼容了IE和火狐谷歌的方法

var p=document.getElementsByTagName("p")[0];
      addEvent('click',p,fn)
      function addEvent(str,ele,fn){
        ele.attachEvent?ele.attachEvent('on'+str,fn):ele.addEventListener(str,fn);
      }
      function fn(){
        console.log("春雨绵绵");
      }

登录后复制

这样就完美的解决了兼容性的问题

有绑定事件的话,那就肯定有解绑事件,但是解绑事件和绑定事件一样,万恶的IE还是会搞特殊化

杰易OA办公自动化系统6.0

基于Intranet/Internet 的Web下的办公自动化系统，采用了当今最先进的PHP技术，是综合大量用户的需求,经过充分的用户论证的基础上开发出来的，独特的即时信息、短信、电子邮件系统、完善的工作流、数据库安全备份等功能使得信息在企业内部传递效率极大提高，信息传递过程中耗费降到最低。办公人员得以从繁杂的日常办公事务处理中解放出来，参与更多的富于思考性和创造性的工作。系统力求突出体系结构简明

查看详情

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中的绑定事件和解绑事件的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

javascript的TypeScript是什么_它为何是JavaScript的超集？ javascript如何实现图表绘制_有哪些流行的图表库可以选择？ javascript中的模板引擎如何工作_与JSX语法有何关联 JavaScript服务端渲染如何操作？ javascript原型链是什么_它如何实现对象的继承？