JS事件在IE与FF中的区别详细解析


Posted in Javascript onNovember 20, 2013

之道的易搜项目中的搜索分类是通过JS动态生成的,每个生成的元素都要动态的添加属性、事件。其中,添加属性可以采用赋值的方式,这对IE和FF都是适用的。比如:

     var element = document.createElement('select');

     element.id = "myselect";

上面的语句在IE和FF中都会有同样的效果,并且运行正常。但是我们创建的元素,大部分是要给其动态添加事件的,显然,我们不能和添加属性一样,直接在后面打个dot,然后写个事件名,然后后面跟着一串代码,那样是会报错的。所以我们可以采用如下的方法来添加事件:

首先:我们要判断当前的浏览器是什么浏览器,我们仍然延用之前的定义,

   if( element.attachEvent ){

    //为IE以及IE内核的浏览器(1)

   }else if( element.addEventListener){

     //为FF以及NS内核的浏览器(2)

   }

上面的if语句块就是帮我们完成当前浏览器是IE还是FF的判断。

浏览器判断出来,然后我们要做的就是把函数注册到元素里面。下面我们给出我们定义的一个功能函数:

   function showElementId(elmt){

     alert(elmt.id);

   }

函数功能很简单,就是提示出参数里面的元素的ID。

如果是IE浏览器,我们把如下代码插入到上面的注释(1)处:

element.attachEvent( "onclick",function(){showElementId(elmt)});

如果是FF浏览器,我们把如下代码插入到上面的注释(2)处:

var eventName = "onclick".replace(/on(.*)/i,'$1');
element.addEventListener( eventName,function(){showElementId(elmt)},false);

因为在FF中给元素注册事件的时候,不需要事件名称前面的“on”,所以要把on给替换掉。

好啦,如果今后各位同行在开发项目中,遇到要用JS动态给元素添加事件的时候,就可以采用上面的方法。那样就可以避免用户在用FF浏览器时候不能使用你幸苦开发的功能了。

Javascript 相关文章推荐
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
jquery延迟对象解析
Oct 26 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
jquery实现手风琴案例
May 04 jQuery
详细介绍Next.js脚手架完整搭建封装
Apr 26 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 #Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 #Javascript
JavaScript中setInterval的用法总结
Nov 20 #Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 #Javascript
jquery iframe操作详细解析
Nov 20 #Javascript
JS获取当前日期和时间的简单实例
Nov 19 #Javascript
js 自动播放的实例代码
Nov 19 #Javascript
You might like
用PHP调用数据库的存贮过程!
2006/10/09 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
php学习之function的用法
2012/07/14 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
php支付宝接口用法分析
2015/01/04 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
thinkphp分页集成实例
2017/07/24 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
浅析Python 中整型对象存储的位置
2016/05/16 Python
windows系统下Python环境搭建教程
2017/03/28 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
Python向excel中写入数据的方法
2019/05/05 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
python将数组n等分的实例
2019/12/02 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
法院信息化建设方案
2014/05/21 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python