脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js绑定事件和解绑事件

js绑定事件和解绑事件

 更新时间：2017年04月27日 09:17:41   作者：Cythia-milk  
本篇文章主要介绍了js绑定事件和解绑事件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

在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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家

您可能感兴趣的文章:

相关文章

  • webpack自动打包和热更新的实现方法

    webpack自动打包和热更新的实现方法

    这篇文章主要介绍了webpack自动打包和热更新的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • JS实现仿微博可关闭弹出层效果

    JS实现仿微博可关闭弹出层效果

    这篇文章主要介绍了JS实现仿微博可关闭弹出层效果,涉及JavaScript弹出窗口的设置及页面元素动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • js控制文本框只输入数字和小数点的方法

    js控制文本框只输入数字和小数点的方法

    这篇文章主要介绍了js控制文本框只输入数字和小数点的方法,实例分析了javascript使用正则表达式实现限制数字和小数点的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • javascript 面向对象封装与继承

    javascript 面向对象封装与继承

    本文是对自己这么长时间以来学习javascript面向对象的总结，这里针对封装和继承结合实例进行了详细分析，给有相同需求的小伙伴们参考下吧。
    2014-11-11
  • 利用JS实现scroll自定义滚动效果详解

    利用JS实现scroll自定义滚动效果详解

    这篇文章主要给大家介绍了关于利用JS如何实现scroll自定义滚动效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • JavaScript中的数据劫持和数据代理使用

    JavaScript中的数据劫持和数据代理使用

    文章主要介绍了数据劫持（Object.defineProperty）和数据代理（Proxy）两种方式在JavaScript中的应用,并通过生活中的例子来详细解释它们的工作原理和使用场景,文章还对比了两种方式的优缺点,并指出了它们在Vue.js中的应用
    2025-02-02
  • 一个检测表单数据的JavaScript实例

    一个检测表单数据的JavaScript实例

    这篇文章主要介绍了一个检测表单数据的JavaScript实例，很简单，很实用，比较适合初学者
    2014-10-10
  • 怎么限制input的text里输入的值只能是数字(正则、js)

    怎么限制input的text里输入的值只能是数字(正则、js)

    这篇文章主要通过正则表达式和JS代码限制input的text里输入的值只能是数字的相关资料,需要的朋友可以参考下
    2016-05-05
  • 关于img的href和src取变量及赋值的方法

    关于img的href和src取变量及赋值的方法

    这篇文章主要介绍了img的href和src取变量及赋值的方法,需要的朋友可以参考下
    2014-04-04
  • bootstrap实现嵌套模态框的实例代码

    bootstrap实现嵌套模态框的实例代码

    这篇文章主要介绍了bootstrap实现嵌套模态框的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01

最新评论