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 相关文章推荐
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
Jquery选择子控件"大于号"和" "区别介绍及使用示例
Jun 25 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
jquery获取radio值实例
Oct 16 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
vue实现标签云效果的方法详解
Aug 28 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
编译问题
2006/10/09 PHP
php下通过POST还是GET来传值
2008/06/05 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
php获取图片信息的方法详解
2015/12/10 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
实例讲解PHP表单
2020/06/10 PHP
学习ExtJS table布局
2009/10/08 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
python实现ip查询示例
2014/03/26 Python
wxpython学习笔记(推荐查看)
2014/06/09 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
django使用html模板减少代码代码解析
2017/12/12 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
建筑工程管理专业自荐信范文
2013/12/28 职场文书
施工安全汇报材料
2014/08/17 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
认识实习感想
2015/08/10 职场文书
《司马光》教学反思
2016/02/22 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
Tomcat弱口令复现及利用
2022/05/06 Servers