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 相关文章推荐
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
JS中confirm,alert,prompt函数区别分析
Jan 17 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
详解在React里使用"Vuex"
Apr 02 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 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
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
Python中GIL的使用详解
2018/10/03 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
服务承诺书范文
2014/05/19 职场文书
战友聚会策划方案
2014/06/13 职场文书
2014年林业工作总结
2014/12/05 职场文书
维稳工作承诺书
2015/01/20 职场文书
行政复议决定书
2015/06/24 职场文书
Python基础之pandas数据合并
2021/04/27 Python