JavaScript实现跨浏览器的添加及删除事件绑定函数实例
更新时间：2015年08月04日 15:18:43 作者：黑咖啡
这篇文章主要介绍了JavaScript实现跨浏览器的添加及删除事件绑定函数,采用纯javascript实现jquery的bind及unbind添加与删除事件绑定的技巧,具有很好的浏览器兼容性,需要的朋友可以参考下
本文实例讲述了JavaScript实现跨浏览器的添加及删除事件绑定函数。分享给大家供大家参考。具体如下：
IE 的事件绑定函数是 attachEvent；而 Firefox, Safari 是 addEventListener；Opera 则两种都支持。使用jQuery就可以使用简单的bind()，或者$().click()之类的函数解决，而如果不使用JavaScript框架的时候，大家可是使用下面的封装bind()函数。
添加事件绑定 bind()
/************************************
* 添加事件绑定
* @param obj : 要绑定事件的元素
* @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick".
* @param fn : 事件处理函数
************************************/
function bind( obj, type, fn ){
if( obj.attachEvent){
obj['e'+type+fn]= fn;
obj[type+fn]=function(){
obj['e'+type+fn]( window.event);
}
obj.attachEvent('on'+type, obj[type+fn]);
}else
obj.addEventListener( type, fn,false);
}
例如给document添加一个点击事件：
var fn=function(){
alert("Hello, World!!");
};
bind(document,"click", fn);
删除事件绑定 unbind()
unbind()对于上面的bind()函数
/************************************
* 删除事件绑定
* @param obj : 要删除事件的元素
* @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick"
* @param fn : 事件处理函数
************************************/
function unbind( obj, type, fn ){
if( obj.detachEvent){
obj.detachEvent('on'+type, obj[type+fn]);
obj[type+fn]=null;
}else
obj.removeEventListener( type, fn,false);
}
例如删除第一个绑定的document点击事件：
复制代码 代码如下:
unbind(document,"click",fn);
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
这篇文章主要介绍了JavaScript检查数字是否为整数或浮点数的方法,涉及javascript类型判断的相关技巧,需要的朋友可以参考下2015-06-06
一直对Js的作用域有点迷糊，今天偶然读到Javascript权威指南，立马被吸引住了，写的真不错。我看的是第六版本，相当的厚，大概1000多页，Js博大精深，要熟悉精通需要大毅力大功夫。谢谢心得吧2014-11-11
微信小程序通过点击事件跨页面传参及data-方法传参（data-）的示例详解
在 vue 中，我们可以直接在点击事件中放入传递的参数进行传参；然而微信小程序中并不适用这样的写法，但是微信小程序可以通过自定义属性从而绑定参数使用，这篇文章主要介绍了微信小程序通过点击事件跨页面传参以及data-方法传参（data-）,需要的朋友可以参考下2023-12-12
昨天我问一美工jQuery怎么样了，他说简单的还可以，复杂的就不行了，我又问是哪种程度的复杂？2010-11-11
话说自从学前端以来听到过多次这样的"笑话",程序员分为会正则的和不会正则的,可见正则的重要性,这篇文章主要给大家介绍了关于js正则表达式之前瞻后顾与非捕获分组的相关资料,需要的朋友可以参考下2021-10-10
公司的业务涉及到统计图的有很多,最近一直echarts里面踩各种坑,下面这篇文章主要给大家介绍了关于echarts地图设置背景图片及海岸线的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了小程序中设置缓存过期的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要为大家详细介绍了本地存储localStorage的用法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07![JavaScript 反科里化 this [译]](//img.jbzj.com/images/xgimg/bcimg8.png)
本文主要讲了JavaScript中科里化和反科里化this的方法.话题来自于Brendan Eich(JavaScript之父)的一个tweet2012-09-09
电商系统中订单、库存中有数字等加减乘除算术,下面这篇文章主要给大家介绍了关于利用Math.js解决JS计算小数精度丢失问题的相关资料,mathjs是一个前端在计算上面必定会用到的类库,需要的朋友可以参考下2022-04-04
![JavaScript 反科里化 this [译]](http://img.jbzj.com/images/xgimg/bcimg8.png)
最新评论