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的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
Canvas实现动态的雪花效果
Feb 13 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
关于layui时间回显问题的解决方法
Sep 24 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 Javascript
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
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
php以post形式发送xml的方法
2014/11/04 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
浅谈PHP表单提交(POST&GET&URL编/解码)
2017/04/03 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
jQuery 位置插件
2008/12/25 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
jsonp原理及使用
2013/10/28 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
AngularJS入门之动画
2016/07/27 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
简单的python后台管理程序
2017/04/13 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
Python代码注释规范代码实例解析
2020/08/14 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
幼儿园中秋节活动反思
2014/02/16 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
家长通知书家长评语
2014/04/17 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
个人总结格式范文
2015/03/09 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
入党申请书怎么写?
2019/06/21 职场文书