IE兼容事件绑定V1.0
想要兼容IE678，少用原型，因为它们没有完全实现ECMA-262规范
(function(window){
//兼容IE678时少用原型，因为它没有完全遵循ECMA-262规范
//衬垫代码：isArray方法的兼容方案
if (!Array.isArray) {
Array.isArray = function(arg) {
return Object.prototype.toString.call(arg) === '[object Array]';
};
}
//衬垫代码：every数组过滤方法的兼容方案
if (!Array.prototype.every){
Array.prototype.every = function(fun /*, thisArg */)
{
'use strict';
if (this === void 0 || this === null)
throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== 'function')
throw new TypeError();
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; i < len; i++)
{
if (i in t && !fun.call(thisArg, t[i], i, t))
return false;
}
return true;
};
}
var bear = {
//该函数是一个全兼容的事件绑定函数，但只能处理一个事件回调函数
addListener: function(node,name,fn){
if(node.addEventListener){
node.addEventListener(name,fn);
}else{
node.attachEvent("on"+name,function(){
fn.call(node);
})
}
},
//该函数是一个全兼容的事件绑定函数，能处理一个回调数组
addMoreListener: function(node,name,arr){
if(typeof arr === "function"){
bear.addListener(node,name,arr);
}else if(Array.isArray(arr)&&arr.length){
if(node.addEventListener){
}else if(node.attachEvent){
arr = arr.reverse();
}
var flag = arr.every(function(item){
return typeof item === "function";
})
if(flag){
for(var i=0;i<arr.length;i++){
bear.addListener(node,name,arr[i]);
}
}else{
throw new Error("数组内元素类型有误");
}
}else{
throw new Error("第三参数类型有误或为空数组");
}
}
}
window.bear = bear;
})(window)
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#app{
width: 100px;
height: 100px;
background: #F4A460;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
font: 20px/100px helvetica;
text-align: center; }
</style> <script src="./js/bear-extend-event2.js"></script>
<script>
window.onload = function(){ var appNode = document.getElementById("app");
var arr = [function(){console.log(1);},function(){console.log(2);}]
//debugger
bear.addMoreListener(appNode,"click",arr);
}
</script>
</head>
<body>
<div id="app">app</div>
</body>
</html>
IE兼容事件绑定V1.0的更多相关文章
- ie低版本内核事件兼容问题（事件绑定，绑定事件自动执行，文档模式问题）
问题情况 搜狗等,兼容模式下,以前前端写的点击事件的代码没有, 后来一看是因为兼容模式为9,导致点击事件失效 解决办法,步骤 1,处理绑定事件兼容问题 ie低版本绑定事件只支持attactevent, ...
- 兼容IE9以下和非IE浏览器的原生js事件绑定函数
事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...
- 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent
兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent ;(function(){ // 事件绑定 bi ...
- jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on
事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...
- JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> ...
- 事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
● 事件分为三个阶段: 事件捕获 --> 事件目标 --> 事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传 ...
- JS+Zero Clipboard swf复制到剪贴板 兼容浏览器(bind事件绑定函数)
转自http://www.ipmtea.net/css_ie_firefox/201107/07_499.html 1.ZeroClipboard其实是国外的一个js类库,源码结构如: var Zer ...
- Omi v1.0震撼发布 - 令人窒息的Web组件化框架
原文链接--https://github.com/AlloyTeam/omi 写在前面 Omi框架经过几十个版本的迭代,越来越简便易用和强大. 经过周末的连续通宵加班加点,Omi v1.0版本终于问世 ...
- Omi v1.0震撼发布 - 开放现代的Web组件化框架
原文链接--https://github.com/AlloyTeam/omi 写在前面 Omi框架经过几十个版本的迭代,越来越简便易用和强大. 经过周末的连续通宵加班加点,Omi v1.0版本终于问世 ...
随机推荐
- 2.nginx_rewrite模块
rewrite syntax: rewrite regex replacement [flag] Default: — Context: server, location, if 如果正则表达式(re ...
- JPA:identifier of an instance of was altered from
由于前台提交的对象,并没有关联对象的数据. 所以要把关联对象赋值一下,在合并集合. WmsOutboundreport entity2 = service.findOne(item.getOutbou ...
- [洛谷P1006] 传纸条
双线程DP的常识:DP的阶段问题:多阶段决策问题 传送门:$>here<$ 题意 n*m的矩阵里,从左上角走到右下角(只能往右或往下),再从右下角走回左上角(只能往左或往上).其中不能重复 ...
- react native 封装TextInput组件
上一篇 react-native文章提到了TextInput组件对安卓的适配问题,因此对该组件进行封装很有必要. 文章地址 react native定报预披项目知识点总结 TextInput介绍 官 ...
- Alice and Bob HDU - 4111 （SG函数）
Alice and Bob are very smart guys and they like to play all kinds of games in their spare time. The ...
- django集成celery
Celery是一个基于分布式消息传递的开源异步任务队列,在django实际应用场景下,往往有一些较为耗时,但并不需要返回值的任务, 例如发送邮件,更新我们自己的统计数据库,这时我们可以将这些任务交由c ...
- Flexbox（弹性盒模型）完全指南
Flexbox(弹性盒模型)布局完全指南 Github:sueRimn 来源:A guide to Flexbox 这个指南讲诉了flexbox的所有内容,重点介绍了父元素(flex容器)和子元素(f ...
- （十四）QFile操作，QByteArray，文件流操作,QTextStream，QDataStream，QFileInfo, QIODevice
QFile f 1.readall #include "widget.h" #include "ui_widget.h" #include <QFileD ...
- 在linux服务器上搭建nvidia-docker环境
docker相当于一个容器,其可以根据你所需要的运行环境构建相应的运行环境,此时各个环境之间彼此隔离,就不会存在在需要跑一个新的代码的时候破坏原来跑的代码所需要的环境,各个环境之间彼此隔离开,好像一个 ...
- BAT面试经验分享——iOS高级开发工程师的自我总结！
序言 目前形势,参加到iOS队伍的人是越来越多,甚至已经到供过于求了. 今年,找过工作人可能会更深刻地体会到今年的就业形势不容乐观,随着各大公司秋招的开始,很多小伙伴都行动起来了,我也有幸获得了一份不 ...