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. C++中栈结构建立和操作

    什么是栈结构 栈结构是从数据的运算来分类的,也就是说栈结构具有特殊的运算规则,即:后进先出. 我们可以把栈理解成一个大仓库,放在仓库门口(栈顶)的货物会优先被取出,然后再取出里面的货物. 而从数据的逻 ...

  2. LEADTOOLS V19: 世界领先的图像处理开发工具包强势来袭

      投递人 itwriter 发布于 2014-12-22 16:04 评论(0) 有214人阅读   原文链接  [收藏]   « » LEAD 科技于 2014 年 12 月 11 日发布 LEA ...

  3. StringBuffer输出

    public class Test { public static void main(String[] args) { StringBuffer a = new StringBuffer(" ...

  4. 注解:java 自定义注解应用实例

    本例子旨在使用自定义注解为实体打上标记,为自动生成 sql 提供依据,模拟 hibernate 的注解,至于注解的原理自己搜吧 1.定义 Table 注解 package test; import j ...

  5. 3. XML实体注入漏洞的利用与学习

    XML实体注入漏洞的利用与学习 前言 XXE Injection即XML External Entity Injection,也就是XML外部实体注入攻击.漏洞是在对非安全的外部实体数据进行处理时引发 ...

  6. eigen3.3.3+opencv3.2跑orbslam3数据集出现usleep错误

    cd ORB_SLAM2 chmod +x build.sh ./build.sh的时候出现错误:/home/zhao/ORB_SLAM2-master/src/System.cc:236:28: e ...

  7. laravel 常见操作

    1.url()

  8. 2017-10-17 NOIP模拟赛

    Reverse #include<iostream> #include<cstdio> #include<cstring> using namespace std; ...

  9. 简谈react中的虚拟DOM

    相信你在看到此篇前也翻阅大量的对DOM的文章讲解和介绍 react中的虚拟DOM 此篇我尽量说人话(大白话),不然想必你在看到别的大神的文章早就懂了. 不说废话了,上干货. 1.首先简单对Html中的 ...

  10. vue散碎知识点学习

    1. vue散碎知识点学习 1.1. 特点 数据渲染/数据同步 组件化/模块化 其他功能路由,ajax,数据流 1.2. Vue.js学习资源 vuejs中文官网:http://cn.vuejs.or ...