js的事件绑定方法中,ie只支持attachEvent,而FF和Chrome只支持addEventListener;严格来说:addEventListener只有IE9以上版本的IE浏览器上能够兼容,IE8或者更低的版本是不支持,这时要想能够兼容IE低版本浏览器就需要判断当前浏览器然后针对不同浏览器决定用哪一个。

  attachEvent和addEventLitener的不同之处是第二个参数事件名要多加个“on”,比如‘onclick’,而且他的this 指向的是window,在使用的时候需要改变this指向。下面就是一个兼容的写法:

 var Event = {};
Event.addEvents = function(target,eventType,handle){
if(document.addEventListener){
Event.addEvents = function(target,eventType,handle){
target.addEventListener(eventTypt,handle,false);
};
}else {
Event.addEvents = function(target,eventType,handle){
target.attachEvent('on'+eventType,function(){
handle.call(target,arguments);
});
}; }
Event.addEvents(target,eventType,handle); }

调用方法:

 Event.addEvents(document,"click",function(){
alert(ok)
});

js绑定事件方法:addEventListener的兼容问题的更多相关文章

  1. js绑定事件方法:addEventListener与attachEvent的不同浏览器的兼容性写法

    js的事件绑定方法中,ie仅仅支持attachEvent,而FF和Chrome仅仅支持addEventListener,所以就必须为这两个方法做兼容处理,原理是先推断attachEvent仅仅否为真( ...

  2. JqueryOn绑定事件方法介绍

    JqueryOn绑定事件方法介绍 1. 简介 (1) On()方法在被选及子元素上添加一个或多个事件处理程序 (2) 在jquery 版本1.7起,on()方法是bind(),live()和deleg ...

  3. jQuery绑定事件方法及区别(bind,click,on,live,one)

    第一种方式: ? 1 2 3 4 5 $(document).ready(function(){  $("#clickme").click(function(){  alert(& ...

  4. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  5. JS绑定事件和移除事件的处理方法

    addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件 ...

  6. js绑定事件和解绑事件

    在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法  只支持IE678,不兼容其他浏览器 addEv ...

  7. 学习之js绑定事件

    由于ie中绑定事件的bug,所以产生了用原生的实践操作来模拟事件绑定的方法,跟着李炎恢学的一招. function addEvent(obj, type, fn){ if(obj.addEventLi ...

  8. js绑定事件代理的坑

    js通过事件代理的方式绑定跳转事件,我这里的逻辑是把click事件绑定在最外层container上面,如果e.target包含我已经写好的class,则执行跳转逻辑.但是这种方式好像只能是在点击的元素 ...

  9. [jquery]高级篇--js绑定事件

    参考:  http://www.cnblogs.com/leejersey/p/3545372.html jQuery on()方法是官方推荐的绑定事件的一个方法.$(selector).on(eve ...

随机推荐

  1. JDBC编程之数据查询

    ----------------siwuxie095                             JDBC 编程之数据查询             首先下载 MySQL 的 JDBC 驱动 ...

  2. sklearn常用数据的使用

    from sklearn import datasets from sklearn.linear_model import LinearRegression #加载数据 loaded_data = d ...

  3. 8、scala面向对象编程之Trait

    一.Trait基础 1.将trait作为接口使用 // Scala中的Triat是一种特殊的概念 // 首先我们可以将Trait作为接口来使用,此时的Triat就与Java中的接口非常类似 // 在t ...

  4. Spring入门第二十五课

    使用具名参数 直接看代码: db.properties jdbc.user=root jdbc.password=logan123 jdbc.driverClass=com.mysql.jdbc.Dr ...

  5. AndroidMainfest.xml文件解释

    AndroidManifest.xml是每个android程序中必须的文件.它位于application的根目录,描述了package中的全局数据,包括了package中暴露的组件(activitie ...

  6. JpetStore目录文件关系分析

    http://www.cnblogs.com/sunsonbaby/archive/2004/09/11/42245.html 从功能方向  至上向下分析 com.ibatis.jpetstore.s ...

  7. Java数学相关工具类

    1.求百分比 public class Test1 { public static String myPercent(int y, int z) { String baifenbi = "& ...

  8. STL特性总述——写在前面

    所谓的容器,见名知意,容纳其他数据的"器具": 特点 1)支持泛型: 2)保存副本:本质上传入对象的拷贝. 3)内存托管 :构建对象于堆,无需人工干预,自动管理内存的生存周期. S ...

  9. Android APK反编译技巧全讲解

    导言:在我们安卓开发当中,我们不仅需要掌握基础的开发技能,也需要掌握软件的安全技能,这样才可以让我们的软件能够成为一款能够真正可以进行发布的软件,同时也可以让自己的核心技术不会被别人所盗取. 首先我们 ...

  10. express+vue-cli实现前后端分离交互小例

    准备工作 1.Express 应用生成器 npm install express-generator -g 2.vue-cli手脚架 npm install -g vue-cli 3.项目结构 . ├ ...