引子:用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. UVALive 7045 Last Defence

    ProblemK. Last Defence Description Given two integersA and B. Sequence S is defined as follow: • S0 ...

  2. Selenium 基本操作--元素定位

    对页面元素进行操作 1.   输入框输入 driver.findElement(By.id("id号")).sendKeys(“输入框输入内容”): 例:

  3. asp.net mvc源码分析-Route的GetRouteData

    我知道Route这里东西应该算路由,这里把它放到mvc里面有些不怎么合适,但是我想大家多数遇到路由都是在mvc的时候吧.首先我们还是来看看GetRouteData方法吧 [csharp] public ...

  4. Java面试系列

    如果你的面试简历是如下这样写的,请务必准备回答下面的所有问题. 面试职位:Java高级工程师 专业技能: (1)牢固掌握Java基础知识,如集合.并发.I/O等,并对Java源码有一定的研究. (2) ...

  5. html、css、js实现轮播图

    2017-03-13 今天把轮播图的知识1过了一下,写了一个比较简单的轮播图,给大家参考一下. 查看具体的效果点击这个链接 : http://gjhnstxu.me/%E8%BD%AE%E6%92%A ...

  6. 1002: [FJOI2007]轮状病毒

    1002: [FJOI2007]轮状病毒 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 2609  Solved: 1450[Submit][Statu ...

  7. Angular企业级开发(9)-前后端分离之后添加验证码

    1.背景介绍 团队开发的项目,前端基于Bootstrap+AngularJS,后端Spring MVC以RESTful接口给前端调用.开发和部署都是前后端分离.项目简单部署图如下,因为后台同时采用微服 ...

  8. IE浏览器img不显示解决

    下面的只是一个我们在网页中插入一个图片的简单例子,浏览的时候我们也没有任何问题 <!doctype html> <html> <head> <meta cha ...

  9. requireJS 从概念到实战

    requireJS 可以很轻易的将一个项目中的JavaScript代码分割成若干个模块(module).并且requireJS推荐一个模块就是一个文件,所以,你将获得一些零碎的具有互相依赖关系的JS文 ...

  10. iOS开发之URLSession

    1.概述 n  NSURLSession是iOS7中新的网络接口,与NSURLConnection是并列的. n  当程序在前台时,NSURLSession与NSURLConnection大部分可以互 ...