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中void(0)的具体含义解释
Feb 27 Javascript
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vscode中使用npm安装babel的方法
Aug 02 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中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
Python将string转换到float的实例方法
2019/07/29 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
工程开工庆典邀请函
2014/02/01 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
讲解员培训方案
2014/05/04 职场文书
责任书格式范文
2014/07/28 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
安全员岗位职责范本
2015/04/11 职场文书
python实现简单倒计时功能
2021/04/21 Python
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL