addEventListener()和attachEvent()

　　一般来说，我们为某个对象添加监听事件，使用addEventListener()或attachEvent()函数，那么这两个函数有什么区别呢？

　　当我们在IE8中为对象添加监听事件时，我们应该使用attachEvent()，而在其它时候，我们则用addEventListener()。

　　下面是一个为某个对象添加监听事件的通用方法：

//Library.js
function $(id) {
	return document.getElementById(id);
};

//为obj对象添加type类型的事件，监听函数是func
function addEvent(obj, type, func) {
	if(obj.addEventListener) {
		obj.addEventListener(type, func, 'false');
	} else if(obj.attachEvent) {
		//IE8
		obj.attachEvent('on' + type, func);
	} else {
		obj['on' + type] = func;
	}
};

　　

<div id="div1">Click Me</div>

　　为div1添加点击事件时

addEvent($('div1'), 'click', function() {
    alert('hello');
});

　　无论在IE8或是Chrome或是Firefox中代码都能正常运行。

 

　　第二个不同的地方就是它们的事件处理程序的作用域的不同。addEventListener中事件处理函数会在其所属元素作用域内运行，而attachEvent的事件处理程序会在作用域中运行。如

在IE8中:

var myDiv = document.getElementById('myDiv');
myDiv.attachEvent('onclick', function() {
    alert(this === window);  //true
});

在其他浏览器中:

var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('click', function() {
    alert(this === window); false
}, false);

　　

　　第三个不同的地方是使用addEventListener为元素注册的事件是哪个先注册哪个先执行，而attachEvent正好相反。