据说每个大牛、小牛都应该有自己的库——Event处理
今天抽时间写了一部分Event处理方面的函数愈发的觉得jQuery的优秀，自己前期的想法太粗糙，造成后面这些函数参数很多，操作很很不直观，看样子是要重构的节奏，还好小伙儿伴们安慰，架构都是改出来的。继续探索吧
浏览器兼容性
写Event处理的库函数一个难点就在于浏览器兼容性问题，在IE低版本浏览器中事件对象始终在window.event属性中，而在其它浏览器中event会作为事件处理程序中作为第一个参数传入。而且其Event对象的属性和方法也有诸多差异，在JavaScript与HTML交互——事件中基本有所总结，不过还是抄一段关于事件处理程序绑定方面的差异
1. 参数个数不相同，这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）
2. 第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
3. 事件处理程序的作用域不相同，addEventListener得作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window
4. 为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器
最简单的四个
先写四个最简单的
- getEvent：获取事件对象
- getTarget：获取事件源对象
- preventDefault：阻止事件默认行为
- stopPropagation：阻止事件冒泡
(function (window) {
var ssLib = {
getEvent: function (e) {
return e ? e : window.event;
},
getTarget: function (e) {
var e = this.getEvent(e);
return e.target || e.srcElement;
},
preventDefault: function (e) {
var e = this.getEvent(e);
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
},
stopPropagation: function (e) {
var e = this.getEvent(e);
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
};
window.ssLib = window.ss = ssLib;
})(window);
代码很简单，相信聪明的小伙儿伴们一看就懂，就不多做解释了
addEvent/removeEvent
- addEvent:为元素绑定事件处理程序
- removeEvent：移除元素事件处理程序
addEvent: function (element, type, handler, key) {
var key = key || handler;
if (element[type + key])
return false;
if (typeof element.addEventListener != "undefined") {
element[type + key] = handler;
element.addEventListener(type, handler, false);
}
else {
element['e' + type + key] = handler;
element[type + key] = function () {
element['e' + type + key](window.event);
};
element.attachEvent('on' + type, element[type + key]);
}
return true;
},
removeEvent: function (element, type, key) {
if (!element[type + key])
return false;
if (typeof element.removeEventListener != "undefined") {
element.removeEventListener(type, element[type + key], false);
}
else {
element.detachEvent("on" + type, element[type + key]);
element['e' + type + key] = null;
}
element[type + key] = null;
return true;
},
这两个函数兼容性写法有很多，结合了很多大牛的写法后我用的上面版本，这么些看似很复杂，实际上主要解决了上面提到的、除了多个事件处理程序执行顺序问题的浏览器兼容性问题，比较难看懂的IE绑定部分就是为了处理this而写的。
在使用的时候，可以显示传入一个key用于内部识别绑定函数，如果不绑定则使用handler本身作为key，所以可以这么用
ssLib.addEvent(element,'click',function(){},'test');
ssLib.removeEvent(element,'click','test');
function handler(){}
ssLib.addEvent(element,'click',handler);
ssLib.removeEvent(element,'click',handler);
on/off
这个是看到jQuery的on/delegate和YUI 的delegate后萌发的想法，不过平时老用人家的没自己写过，仓促写了一个，感慨颇多，还是jQuery好使
on: function (parent, type, handler,validater,key) {
var _key=key || handler;
parent['on'+type+_key]=function (e) {
var target = ssLib.getTarget(e);
var isFire = validater(target);
if (isFire) {
target[type + _key] = handler;
target[type + _key](e);
}
};
ssLib.addEvent(parent, type,parent['on'+type+_key] , key);
},
off: function (parent, type, key) {
if(typeof key=='function'){
ssLib.removeEvent(parent, type, parent['on'+type+key]);
}else{
ssLib.removeEvent(parent, type, key);
}
parent['on'+type+key]=null;
}
写法和刚才类似，不停的绕来绕去也是解决this问题，可以这么用
<div id="test">
<div id="t1">T1</div>
<div id="t2">T2</div>
</div>
var parent = document.getElementById('test');
var handler=function () {
alert(this.id);
}
var validater=function (obj) {
if(obj.parentNode.id=='test'){
return true;
}else{
return false;
}
}
ss.on(parent, 'click', handler, validater);
ss.off(parent,'click',handler);
ss.on(parent, 'click', handler, validater,'delegate');
ss.off(parent,'click','delegate');
ready
用过jQuery的同学肯定知道这个函数，写自己库的时候是各种惊羡啊，于是乎加到了自己的库里
ready: function (fn) {
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function () {
document.removeEventListener("DOMContentLoaded", arguments.callee, false);// 防止多次调用
fn();
}, false);
} else if (document.addEvent) {
var doc = window.document, done = false;
// only fire once
var init = function () {
if (!done) {
done = true;
fn();
}
};
// polling for no errors
(function () {
try {
// throws errors until after ondocumentready
doc.documentElement.doScroll('left');// 文档加载完成后此方法可用
} catch (e) {
setTimeout(arguments.callee, 50);
return;
}
// no errors, fire
init();
})();
// trying to always fire before onload
doc.onreadystatechange = function () {
if (doc.readyState == 'complete') {
doc.onreadystatechange = null;
init();
}
};
}
}
要想看懂上面代码最好看看An alternative for DOMContentLoaded on Internet Explorer
在现代浏览器中文档加载完后会触发“DOMContentLoaded”事件，而在底版本IE中文档加载完成后会doScroll方法会生效
Event部分源代码
(function (window) {
var ssLib = {
getEvent: function (e) {
return e ? e : window.event;
},
getTarget: function (e) {
var e = this.getEvent(e);
return e.target || e.srcElement;
},
preventDefault: function (e) {
var e = this.getEvent(e);
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
},
stopPropagation: function (e) {
var e = this.getEvent(e);
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
},
addEvent: function (element, type, handler, key) {
var key = key || handler;
if (element[type + key])
return false;
if (typeof element.addEventListener != "undefined") {
element[type + key] = handler;
element.addEventListener(type, handler, false);
}
else {
element['e' + type + key] = handler;
element[type + key] = function () {
element['e' + type + key](window.event);
};
element.attachEvent('on' + type, element[type + key]);
}
return true;
},
removeEvent: function (element, type, key) {
if (!element[type + key])
return false;
if (typeof element.removeEventListener != "undefined") {
element.removeEventListener(type, element[type + key], false);
}
else {
element.detachEvent("on" + type, element[type + key]);
element['e' + type + key] = null;
}
element[type + key] = null;
return true;
},
ready: function (fn) {
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function () {
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
fn();
}, false);
} else if (document.attachEvent) {
var doc = window.document, done = false;
// only fire once
var init = function () {
if (!done) {
done = true;
fn();
}
};
// polling for no errors
(function () {
try {
// throws errors until after ondocumentready
doc.documentElement.doScroll('left');
} catch (e) {
setTimeout(arguments.callee, 50);
return;
}
// no errors, fire
init();
})();
// trying to always fire before onload
doc.onreadystatechange = function () {
if (doc.readyState == 'complete') {
doc.onreadystatechange = null;
init();
}
};
}
},
on: function (parent, type, handler, validater, key) {
var _key = key || handler;
parent['on' + type + _key] = function (e) {
var target = ssLib.getTarget(e);
var isFire = validater(target);
if (isFire) {
target[type + _key] = handler;
target[type + _key](e);
}
};
ssLib.addEvent(parent, type, parent['on' + type + _key], key);
},
off: function (parent, type, key) {
if (typeof key == 'function') {
ssLib.removeEvent(parent, type, parent['on' + type + key]);
} else {
ssLib.removeEvent(parent, type, key);
}
parent['on' + type + key] = null;
}
};
window.ssLib = window.ss = ssLib;
})(window);
据说每个大牛、小牛都应该有自己的库——Event处理的更多相关文章
- 据说每个大牛、小牛都应该有自己的库——DOM处理续
在上篇据说每个大牛.小牛都应该有自己的库——DOM处理最后剩下attr()和css()方法没有处理,因为这两个方法当时并不自计划中,是写着写着突然想到的,一时间没有特别好的思路,当时已十一点多了,就去 ...
- 据说每个大牛、小牛都应该有自己的库——DOM处理
这几天整理了一下思路,本来觉得DOM部分会有很多东西,但是忽然发现频繁使用的其实并不太多 class class处理部分主要有四个 hasClass:检查元素是否包含某个class addClass: ...
- 据说每个大牛、小牛都应该有自己的库——JavaScript原生对象拓展
在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏,一是,关于写个自己的库的想法由来 ...
- 据说每个大牛、小牛都应该有自己的库——Ajax
蹉跎到今天终于要写Ajax部分了,平时工作中除了选择器我用jQuery的最多的就是ajax,所以这部分在自己的框架中必不可少. XMLHttpRequest 我以为对每个使用过Ajax的人来说XMLH ...
- 让所有网站都提供API的Python库：Toapi
这是一个让所有网站都提供API的Python库.以前,我们爬取数据,然后把数据存起来,再创造一个api服务以便其他人可以访问.为此,我们还要定期更新我们的数据.这个库让这一切变得容易起来.你要做的就是 ...
- Xcode 5.1 编译模拟器以及真机都能使用的静态库
Xcode 5.1.dmg 下载地址 http://pan.baidu.com/s/1jGJpKm6 1.新建 Framework & Library 工程 我起名叫ShowInfo,下面为其 ...
- pycharm每次新建项目都要重新安装一些第三方库的解决办法（转载防删）
目前有三个解决办法,也是亲测有用的: 第一个方法:因为之前有通过pycharm的project interpreter里的+号添加过一些库,但添加的库只是指定的项目用的,如果想要用,就必须用之前的项目 ...
- 每个android项目都应该使用的android 库
http://blog.teamtreehouse.com/android-libraries-use-every-project A good developer knows to never re ...
- JavaScript原生对象拓展
JavaScript原生对象拓展 在据说每个大牛.小牛都应该有自己的库——框架篇中我扬言要做个小牛,没想到一天没更新,小伙儿伴们就戏谑的问我,油哥是不是要太监了?其实事情是这个样子的,这不是太监的节奏 ...
随机推荐
- 转载：JAVA中关于set()和get()方法的理解及使用
对于JAVA初学者来说,set和get这两个方法似乎已经很熟悉了,这两个方法是JAVA变成中的基本用法,也是出现频率相当高的两个方法. 为了让JAVA初学者能更好的理解这两个方法的使用和意义,今天笔者 ...
- 【学习】JAVA的第一天（补）
补上1024第一天的JAVA学习,也刚好是程序员节.今天学习了JAVA的一些历史和基础环境的配置,以及HelloWorld入门程序. JAVA体系:JAVAME(一些简单的移动端开发).JAVAEE( ...
- [Leetcode][JAVA] Distinct Subsequences
Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequence ...
- Cocoapods的安装,卸载和使用
[一]Cocoapods的安装 (1)Cocoapods的官方网站为: https://cocoapods.org/ .如果你的电脑已经安装了Ruby开发环境,那么在终端(Terminal)中使用以下 ...
- java基础3_流程控制语句
一 条件判断 1. 条件运算符(三元表达式) ,其形式为: type d = a ? b : c; 具体化形式为:int d = 2 < 1 ? 3 : 4; 2. 轻量级的文本编辑器:Ultr ...
- javadoc错误: 编码gbk的不可映射字符
在使用Eclipse进行javadoc的导出时,提示“编码 GBK 的不可映射字符”,应该就是中文注释Eclipse不认,需要在调用javadoc.exe的时候传递编码集告诉它采用什么编码去生成jav ...
- Bookstore project using XAMPP 详细配置 Part 1
这是学校的一个project,记录在这里,以备复习.主要是用XAMPP通过phpMyAdmin连接MySQL数据库,实现一个简单的查询功能. Outline Setup of XAMPP Implem ...
- 安装CAS服务器
1.简介 参考: http://www.coin163.com/java/cas/cas.html CAS主要用于多系统单点登录,属于WEB SSO.SSO体系主要角色有三种:User(多个),WEB ...
- 3.一起来学hibernate之配置文件2
之前的映射文件配置都是简单的.基础的配置,只涉及到单个javabean,对于单个javabean的增删改查都能很好的.简单的去完成. 但是知道简单配置远远不够,并不能完成很多复杂的情况,比如对象与对象 ...
- Linux内核--网络栈实现分析（九）--传输层之UDP协议（下）
本文分析基于Linux Kernel 1.2.13 原创作品,转载请标明http://blog.csdn.net/yming0221/article/details/7549340 更多请查看专栏,地 ...