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 相关文章推荐
js日期对象兼容性的处理方法
Jan 28 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 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
str_replace只替换一次字符串的方法
2013/04/09 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
php制作文本式留言板
2015/03/18 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
解决uWSGI的编码问题详解
2017/03/24 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
Python的in,is和id函数代码实例
2020/04/18 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
python re模块和正则表达式
2021/03/24 Python
化学相关工作求职信
2013/10/02 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
代办委托书怎样写
2014/04/08 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
关于环保的标语
2014/06/13 职场文书
会计学专业自荐信
2014/06/25 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
警告通知
2015/04/25 职场文书
python基础之类属性和实例属性
2021/10/24 Python