引子：用javascript给元素绑定事件，我们可以用addEventListener这个方法，然而这个方法有兼容问题，比如在IE浏览器上面就无效，在IE上面要用attachEvent这个方法

一、addEventListener和attachEvent的区别：

1、addEventListener有3个参数，attachEvent只有2个参数，默认是冒泡

2、addEventListener的第一个参数是事件类型（例如：click）,attachEvent的第一个参数是事件处理函数名称（例如：onclick）

3、this的指向不同，addEventListener中的this,指的是触发的元素，attachEvent中的this指的window

4、为一个事件添加多个事件处理程序，执行的顺序不同，addEventListener会按照添加的处理程序顺序执行，attachEvent的执行顺序是随机的

二、兼容性封装处理：

举例的HTML结构如下：
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>test001</title>
    <style type="text/css">
        .red{color:red;}
    </style>
</head>
<body class="l-bg2">
 <button id="cnt" class="btn">1111</button> 
 <button class="btn">2222</button>
 <button class="btn">3333</button> 

 <div class="page-coat">
     
 </div> 

</body>
js代码封装如下:
var eles = document.querySelectorAll('.btn') //类数组

//var eles = document.getElementById('cnt') //单个

function addEvent(ele,type,callback){

    if(!ele){

        return false

    };

    if(!ele.length){

        if(ele.addEventListener){

            ele.addEventListener(type,callback,false)

            return true;

        }else if(ele.attachEvent){

            ele['e'+type+callback] = callback;

            ele[type+callback] = function(){

                ele['e'+type+callback](window.event)

            };

            ele.attachEvent('on'+type,ele[type+callback])

            return true

        }

        return false

    }else{

        for(var i=0;i<ele.length;i++){

            eventBody(i)

        }

    }

    //处理类数组元素同时绑定事件方法

    function eventBody(i){

        if(ele[i].addEventListener){

            ele[i].addEventListener(type,callback,false);

        }else if(ele[i].attachEvent){

            ele[i]['e'+type+callback] = callback;

            ele[i][type+callback] = function(){

                ele[i]['e'+type+callback](window.event)

            }

            ele[i].attachEvent('on'+type,ele[i][type+callback])

        }

    }

}

function func1(){

    alert(this.innerText)

}
//使用方法

addEvent(eles,'click',func1)

这样就解决了解决了上面提到的addEventListener和attachEvent的区别问题。

注意：1、this指向的知识，以上巧妙运用了this指向调用这个函数的对象（比如ele），来保证在IE浏览器中，this指向调用次事件的元素

2、闭包的知识，把for循环的每个 i 值，通过闭包保存，如果是ES6，可以用let,就更方便了

以上目的为了讨论学习，有不完善的地方希望大家原谅，并提出更好的方法，谢谢

 欢迎加入大前端交流群！群号：277942610，VIP新群

原生JS跨浏览器事件封装处理的更多相关文章

  1. js跨浏览器事件对象、事件处理程序

    项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...

  2. 【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解

    <javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = { // ...

  3. javascript跨浏览器事件对象类库

    一.前言 学习了javascript事件后,个人总结归纳了跨浏览器事件对象类库,方便以后使用,现分享给大家. 二.事件对象封装 将对浏览器事件对象的操作封装成eventObject.js方便调用 // ...

  4. JQuery和原生JS跨域加载JSON数据或HTML。

    前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $. ...

  5. store.js 跨浏览器的localStorage

    store.js 跨浏览器的localStorage 我们总是想要储存一些数据在浏览器端,却对复杂的兼容性头疼,store.js很好的解决了这些问题. store.js ☍ 使用它相当简单: // 储 ...

  6. js 跨浏览器实现事件

    我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getE ...

  7. 原生js自动触发事件

    熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...

  8. JS跨浏览器的事件处理

    1. 事件流 事件:用户或浏览器自身执行的某种动作.如click(点击事件).mouse***(鼠标事件). 事件流:页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. DOM事件流包括三个阶段 ...

  9. ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决

    之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...

随机推荐

  1. Hibernate一级缓存（基于查询分析）

    首先我们应该弄清什么是hibernate缓存:hibernate缓存是指为了降低应用程序对物理数据源的访问频次,从而提高应用程序的运行性能的一种策略.我们要将这个跟计算机内存或者cpu的缓存区分开. ...

  2. oracle 数据库删除表或表数据恢复问题

    oracle恢复误删除的数据:使用闪回,ORACLE 10G及以上版本! 1. flashback table table_name to timestamp systimestamp-1; (sys ...

  3. 讲一个使用jquery-slick旋转木马效果插件案例

    效果展示连接 http://www.jqcool.net/demo/201405/jquery-slick/ 今天刚接触这个插件,被这插件搞的大脑风暴了 所以来记录一下使用方法 首先注意一点 不特别标 ...

  4. UVa1587 盒子

    前言 第一次刷题,ac的感觉真的很棒! 题目 题目 大意是说,输入6个面,判断是否是个长方体. 思路 根据长方体的特质来判断,比如说6个面中3个面是相互对应的,只有3条不同的边等等. 我就知道我肯定会 ...

  5. StringBuffer与StringBuilder的区别，及实现原理

    区别 1.StringBuffer 与 StringBuilder 中的方法和功能完全是等价的, 2.只是StringBuffer 中的方法大都采用了 synchronized 关键字进行修饰,因此是 ...

  6. CoreAnimation 开篇

    CoreAnimation 开篇 CoreAnimation系列博客是我对学习CoreAnimation的知识整理,博客排列顺序以及知识讲解存在欠缺望见谅. 博客的编写是在工作之余,尽量保证CoreA ...

  7. Bzoj超级经验大放送题集（好评如潮哦～～～）

    其实这些是因为没有数据才形成的...唯一可惜的是这些都是需要300软妹币才能打开的萌萌哒权限题*^_^* 好啦,吾来教你如何快速AC么么哒 pascal: 1 begin end. //Pascal ...

  8. 读书笔记 effective c++ Item 32 确保public继承建立“is-a”模型

    1. 何为public继承的”is-a”关系 在C++面向对象准则中最重要的准则是:public继承意味着“is-a”.记住这个准则. 如果你实现一个类D(derived)public继承自类B(ba ...

  9. Redis命令总结及其基础知识讲述

    1.redis的不同之处 Redis拥有其他数据库不具备的数据结构,又拥有内存存储(这使得redis的速度非常快),远程操作(使得redis可以与多个客户端和服务器进行连接).持久化(使得服务器可以在 ...

  10. Java基础--定时任务Timer(转载)

    Java基础--定时任务Timer 一.Timer介绍 java.util.Timer java.util.TimerTask Timer是一个定时器类,通过该类可以为指定的定时任务进行配置.Time ...