js 添加事件 attachEvent 和 addEventListener 的用法

一般我们在JS中添加事件,是这样子的

1	obj.onclick=method

这种绑定事件的方式，兼容主流浏览器,但如果一个元素上添加多次同一事件呢?

1	obj.onclick=method1;
2	obj.onclick=method2;
3	obj.onclick=method3;

如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法

1	//object.attachEvent(event,function);
2	btn1Obj.attachEvent("onclick",method1);
3	btn1Obj.attachEvent("onclick",method2);
4	btn1Obj.attachEvent("onclick",method3);

使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是

method3->method2->method1

可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法

1	//element.addEventListener(type,listener,useCapture);
2	btn1Obj.addEventListener("click",method1,false);
3	btn1Obj.addEventListener("click",method2,false);
4	btn1Obj.addEventListener("click",method3,false);

执行顺序为method1->method2->method3

做前端开发工程师,最悲剧的某过于浏览器兼容问题了,上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数,幸亏再有前人帮我们做了这件事

01	function addEvent(elm, evType, fn, useCapture) {
02	if (elm.addEventListener) {
03	elm.addEventListener(evType, fn, useCapture);//DOM2.0
04	return true;
05	}
06	else if (elm.attachEvent) {
07	var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+
08	return r;
09	}
10	else {
11	elm['on' + evType] = fn;//DOM 0
12	}
13	}

下面是Dean Edwards 的版本

01	function addEvent(element, type, handler) {
02	//为每一个事件处理函数分派一个唯一的ID
03	if (!handler.$$guid) handler.$$guid = addEvent.guid++;
04	//为元素的事件类型创建一个哈希表
05	if (!element.events) element.events = {};
06	//为每一个"元素/事件"对创建一个事件处理程序的哈希表
07	var handlers = element.events[type];
08	if (!handlers) {
09	handlers = element.events[type] = {};
10	//存储存在的事件处理函数(如果有)
11	if (element["on" + type]) {
12	handlers[0] = element["on" + type];
13	}
14	}
15	//将事件处理函数存入哈希表
16	handlers[handler.$$guid] = handler;
17	//指派一个全局的事件处理函数来做所有的工作
18	element["on" + type] = handleEvent;
19	};
20	//用来创建唯一的ID的计数器
21	addEvent.guid = 1;
22	function removeEvent(element, type, handler) {
23	//从哈希表中删除事件处理函数
24	if (element.events && element.events[type]) {
25	delete element.events[type][handler.$$guid];
26	}
27	};
28	function handleEvent(event) {
29	var returnValue = true;
30	//抓获事件对象(IE使用全局事件对象)
31	event = event || fixEvent(window.event);
32	//取得事件处理函数的哈希表的引用
33	var handlers = this.events[event.type];
34	//执行每一个处理函数
35	for (var i in handlers) {
36	this.$$handleEvent = handlers[i];
37	if (this.$$handleEvent(event) === false) {
38	returnValue = false;
39	}
40	}
41	return returnValue;
42	};
43	//为IE的事件对象添加一些“缺失的”函数
44	function fixEvent(event) {
45	//添加标准的W3C方法
46	event.preventDefault = fixEvent.preventDefault;
47	event.stopPropagation = fixEvent.stopPropagation;
48	return event;
49	};
50	fixEvent.preventDefault = function() {
51	this.returnValue = false;
52	};
53	fixEvent.stopPropagation = function() {
54	this.cancelBubble = true;
55	};

功能非常强悍，解决IE的this指向问题，event总是作为第一个参数传入，跨浏览器就更不在话下。

最后贡献一个HTML5工作组的版本：

01	var addEvent=(function(){
02	if(document.addEventListener){
03	return function(el,type,fn){
04	if(el.length){
05	for(var i=0;i<el.length;i++){
06	addEvent(el[i],type,fn);
07	}
08	}else{
09	el.addEventListener(type,fn,false);
10	}
11	};
12	}else{
13	return function(el,type,fn){
14	if(el.length){
15	for(var i=0;i<el.length;i++){
16	addEvent(el[i],type,fn);
17	}
18	}else{
19	el.attachEvent(‘on‘+type,function(){
20	return fn.call(el,window.event);
21	});
22	}
23	};
24	}
25	})();

可能细心的读者发现了IE的attachEvent和W3C标准的addEventListener绑定多个事件的执行顺序是不一样的。
Dean Edwards的版本么怎么看明白，虽然功能强悍，但感觉有点复杂了，若有看懂的朋友帮忙给解释一下！