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 onload、ready概念介绍及使用方法
Apr 27 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
js导出txt示例代码
Jan 14 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
再谈javascript原型继承
Nov 10 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 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
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
Python模块搜索路径代码详解
2018/01/29 Python
基于python中theano库的线性回归
2018/08/31 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
如何在pycharm中安装第三方包
2020/10/27 Python
python 基于wx实现音乐播放
2020/11/24 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
手机配件第一品牌:ZAGG
2017/05/28 全球购物
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
平安工地建设方案
2014/05/06 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
批评与自我批评总结
2014/10/17 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL