JavaScript实现跨浏览器的添加及删除事件绑定函数实例


Posted in Javascript onAugust 04, 2015

本文实例讲述了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 相关文章推荐
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
json数据的列循环示例
Sep 06 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
vue2中使用less简易教程
Mar 27 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
jquery控制显示服务器生成的图片流
Aug 04 #Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 #Javascript
用js编写的简单的计算器代码程序
Aug 04 #Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 #Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 #Javascript
JavaScript运动减速效果实例分析
Aug 04 #Javascript
JavaScript仿静态分页实现方法
Aug 04 #Javascript
You might like
实现“上一页”和“下一页按钮
2006/10/09 PHP
php递归创建目录的方法
2015/02/02 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
python利用lxml读写xml格式的文件
2017/08/10 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
python global关键字的用法详解
2019/09/05 Python
python SVD压缩图像的实现代码
2019/11/05 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
开办加工厂创业计划书
2014/01/03 职场文书
建议书的格式
2014/05/12 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
行政处罚告知书
2015/07/01 职场文书
驻村工作简报
2015/07/20 职场文书
小学课改工作总结
2015/08/13 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书