对于不同的浏览器,事件响应会有一定的不同,所以我们为了更好的用户效果,必须要考虑好事件兼容性问题。

为了兼容不同的浏览器,我们可以自己编写一个事件对象,通过它的事件添加函数和删除函数来给元素添加/删除对象。

我们在Js中添加一个对象

var  EventFunc={

//定义一个事件添加函数

  addEvent:function(Object,eventname,funct){

     //此处开始编写兼容各种浏览器的添加事件

     if(Object.addEventListener){

              Object.addEventListener(eventname,funct,false);//DOM2级

       }else if(Object.attachEvent){

             Object.attachEvent("on"+eventname,funct);//DOM2级.且注意此时事件名前面要加一个"on"

       } else {

              Object["on"+eventname]=funct//注意IE中的一些低版本上面的两种方式都不支持,所以采用DOM0级,且注意此处一个地方,这儿地方的事件名前面也要加上"on"

        那有的人会说Object."on"+eventname=funct不行吗?  这样是不行的,"."后面是不能加字符串的,所以我们可以通过[]来实现,不用"."  这个地方千万要注意。

         } 

//定义删除事件函数
removeEvent:function(){
if(Object.addEventListener){ Object.removeEventListener(eventname,funct,false);//DOM2级 }else if(Object.attachEvent){ Object.detachEvent("on"+eventname,funct);//DOM2级.且注意此时事件名前面要加一个"on" } else { Object["on"+eventname]=null//注意IE中的一些低版本上面的两种方式都不支持,所以采用DOM0级,且注意此处一个地方,这儿地方的事件名前面也要加上"on" 那有的人会说Object."on"+eventname=funct不行吗? 这样是不行的,"."后面是不能加字符串的,所以我们可以通过[]来实现,不用"." 这个地方千万要注意。 }
} }

如果我们想要给某个元素添加点击事件的话,直接皆可以了

EventFunc.addEvent(Object,"click",function(){ ....})其中我们是"click",不是"onclick",还有后面可以直接写函数名:例如如果有一个函数  function showMes(){...}

那我们可以直接写showMes,注意奥,这里不是showMes()奥,也不是"showMes",

js事件2-事件兼容问题的更多相关文章

  1. js 事件监听 兼容浏览器

    js 事件监听 兼容浏览器   ie 用 attachEvent   w3c(firefox/chrome)  用 addEventListener 删除事件监听 ie 用 detachEven   ...

  2. 从零开始的全栈工程师——js篇2.21(事件对象 arguments 阻止事件默认行为兼容 事件委托 事件源对象)

    一.事件对象 1.常用的事件2.每个元素身上的事件都是天生存在的 不需要我们去定义 只需要我们给这个事件绑定一个方法 当事件触发的时候就会执行这个方法 3.事件绑定的写法 ①div.onclick=f ...

  3. JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...

  4. js事件的一些兼容写法

    事件兼容 事件对象的兼容 获取键码兼容 默认行为兼容 阻止事件冒泡兼容 事件监听兼容 ---- 封装 删除事件监听兼容 ---- 封装 事件委托->获取事件源兼容

  5. JS事件大全及兼容

    一般事件 事件 浏览器支持 描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown  ...

  6. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  7. js学习笔记---事件代理

    事件机制可以分为捕获型和冒泡型.捕获型是事件由父级元素(DOM)传递到子元素.冒泡型正好相反.事件机制默认为冒泡型.事件机制可以通过参数指定. 事件委托可以将我们绑定在document上的事件自动绑定 ...

  8. js事件机制——事件冒泡和捕获

    概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. IE浏览器:事件从 ...

  9. JS中的事件类型和事件属性的基础知识

    周末无聊, 这几天又复习了下JS搞基程序设计3, 想着好记性不如浪笔头哇, 要么把这些东西写下来, 这样基础才能更加扎实么么哒, 知道的同学也可以直接过一下,当做复习,  小姨子再也不用担心我的学习啦 ...

  10. javascript阻止事件冒泡的兼容写法及其相关示例

    //阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...

随机推荐

  1. Expect Command And How To Automate Shell Scripts Like Magic

    In the previous post, we talked about writing practical shell scripts and we saw how it is easy to w ...

  2. Mercari Price Suggestion in Kaggle

    Mercari Price Suggestion 最近看到了一个竞赛,竞赛的内容是根据已知的商品的描述,品牌,品类,物品的状态等特征来预测商品的价格 最后的评估标准为 平均算术平方根误差Root Me ...

  3. [教程]K8Cscan调用外部程序(Win/Linux批量上控/执行多条命令/保存结果)

    0x000 调用原理 Cscan调用外部程序有两种方式,一是编写DLL,二是配置文件 编写DLL文件对于不懂编程的人来说可能会很难(虽然支持各语言) 由于考虑到很多人不会编程或会编程又急用无法短时间转 ...

  4. 【Go】go的日志框架-logrus初探

    summary logrus是针对go语言开发的一款日志系统,在本片文章中,将会对上手logrus的过程中遇到的一些问题做一个记录.这个记录参考了这篇文章.下面我们开始吧! 上手 package ma ...

  5. Docker 下的Zookeeper以及.ne core 的分布式锁

    单节点 1.拉取镜像:docker pull zookeeper 2.运行容器 a.我的容器同一放在/root/docker下面,然后创建相应的目录和文件, mkdir zookeeper cd zo ...

  6. HDU校赛 | 2019 Multi-University Training Contest 2

    2019 Multi-University Training Contest 2 http://acm.hdu.edu.cn/contests/contest_show.php?cid=849 100 ...

  7. SpringBoot中使用@scheduled定时执行任务需要注意的坑

    spring boot: 计划任务@ EnableScheduling和@Scheduled @Scheduled中的参数说明 @Scheduled(fixedRate=2000):上一次开始执行时间 ...

  8. ASP.NET Core中如何显示[PII is hidden]的隐藏信息

    有时候我们在ASP.NET Core项目运行时,发生在后台程序中的错误会将关键信息隐藏为[PII is hidden]这种占位符,如下所示: 而知道这些关键信息,有时候对我们调试程序是非常重要的.所以 ...

  9. 英语orientaljasper鸡血石orientaljasper单词

    鸡血石(orientaljasper),是辰砂条带的地开石,因鲜红色似鸡血的辰砂(朱砂)而得名.鸡血石含有辰砂(朱砂).石英.玉髓35%-45%.磁铁矿.赤铁矿6%-12%.辰砂约5%-8%. 鸡血石 ...

  10. JAVA - Eclipse不能打断点的解决方法

    今天调试eclipse程序,莫名的就遇到这种问题. 解决: 在run菜单里面,把 “skip all breakpoints”  选项勾去即可. 如下图: