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

所属分类: 网络编程 / JavaScript 阅读数: 432
收藏 0 赞 0 分享

之道的易搜项目中的搜索分类是通过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浏览器时候不能使用你幸苦开发的功能了。

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多