原生JS跨浏览器事件封装处理
引子：用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跨浏览器事件封装处理的更多相关文章
- js跨浏览器事件对象、事件处理程序
项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...
- 【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解
<javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = { // ...
- javascript跨浏览器事件对象类库
一.前言 学习了javascript事件后,个人总结归纳了跨浏览器事件对象类库,方便以后使用,现分享给大家. 二.事件对象封装 将对浏览器事件对象的操作封装成eventObject.js方便调用 // ...
- JQuery和原生JS跨域加载JSON数据或HTML。
前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $. ...
- store.js 跨浏览器的localStorage
store.js 跨浏览器的localStorage 我们总是想要储存一些数据在浏览器端,却对复杂的兼容性头疼,store.js很好的解决了这些问题. store.js ☍ 使用它相当简单: // 储 ...
- js 跨浏览器实现事件
我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getE ...
- 原生js自动触发事件
熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...
- JS跨浏览器的事件处理
1. 事件流 事件:用户或浏览器自身执行的某种动作.如click(点击事件).mouse***(鼠标事件). 事件流:页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. DOM事件流包括三个阶段 ...
- ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决
之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...
随机推荐
- RAP在Linux 上的部署
首先讲一下,rap 是什么东西 ,rap 是一种项目的管理工具.用来管理项目的接口的. 首先是在Linux 上装了一个tomcat8 .当然jdk 的环境是必须要有的, 在rap的官网下载了war包 ...
- 编程那些事儿：如何快速地"借用"CSS
做前端开发有时候会碰到任务紧急,需要马上写好静态页的问题.比如,设计师给你扔了一个设计稿,要你在下班之前搞定.这时候你如热锅上的蚂蚁,如果自己写css的话,时间紧张,于是上网找了一下相关模板页面,找到 ...
- 使用promise手动封装ajax函数
最近在做一个单页应用,node和浏览器仅通过json传输数据,因为是只有自己用等于是锻炼一下自己,所以也不用考虑seo的问题,node端我已经写好了,但是浏览器端想要用ajax原生太麻烦,用封装的函数 ...
- 3299: [USACO2011 Open]Corn Maze玉米迷宫
3299: [USACO2011 Open]Corn Maze玉米迷宫 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 137 Solved: 59[ ...
- NSPredicate 查询/搜索
IOS NSPredicate 查询.搜索 简述:Cocoa框架中的NSPredicate用于查询,原理和用法都类似于SQL中的where,作用相当于数据库的过滤取. 最常用到的函数 + (NSP ...
- git 由http切换成git
项目中经常会遇到http 的git 协议为了安全切换成ssh 的git 协议. 这个时候,只要使用如下命令变更 remote 字符串就好了. git remote set-url origin git ...
- 基于定位下拉框或者需要点击link才显示的下拉框,二次定位与多次定位实现的实际效果区别
还是基于上次那个练习的后续出现的思考,http://www.cnblogs.com/8013-cmf/p/6555790.html 界面: 源码: 写法如下: 继续解释这两种的区别: 1.其实基于定 ...
- php线程安全与非线程安全版的区别
Thread Safe(线程安全)和 None Thread Safe(非线程安全) 背景: Linux/Unix系统采用多进程的工作方式,而Windows系统采用多线程的工作方式. CGI模式是建立 ...
- R语言数据分析利器data.table包 —— 数据框结构处理精讲
R语言data.table包是自带包data.frame的升级版,用于数据框格式数据的处理,最大的特点快.包括两个方面,一方面是写的快,代码简洁,只要一行命令就可以完成诸多任务,另一方面是处理 ...
- centos6.5用tomcat安装jenkins
1下载jdk并安装配置环境变量 # cd /opt/app # .0_45.tar.gz # vi /etc/profile JAVA_HOME=/opt/app/jdk1..0_45 CLASSPA ...