深入了解javascript事件 -事件绑定（事件处理函数/监听函数）
首先不推荐使用的写法，类似上一节的例子<div onclick="doclick(this);"> click me!</div>这种写法虽然在各种浏览器都可以执行，但是比较影响代
码的结构使html代码跟脚本代码糅在一起，不变代码的阅读和修改。
现在来介绍下3种事件绑定和它们之间的优缺点。
1、传统型事件绑定，如下代码
<head>
<title></title>
</head>
<body>
<div id='sampleDiv'> click me!</div>
<br />
<div id='Div1'> click me2!</div>
</body>
<script type="text/javascript">
document.getElementById("sampleDiv").onclick = function (e) {
alert(this.nodeName);
}
document.getElementById("sampleDiv").onclick = function (e) {
alert(this.innerHTML);
}
document.getElementById("Div1").onclick = function (e) {
tt();
}
function tt() {
alert(this.innerHTML);
}
</script>
</html>
点击ID为sampleDiv 的DIV元素，页面弹出 click me!。
这种绑定方式的优点就是 :
1、使得html代码和脚本剥离
2、在各种浏览器上都能稳定的运行
3、this对象指向元素本身（特别注意的是ID为div1的onclick写法，很多新手都犯了这种错误，这种写法的this就不是指向元素本身，而是window对象，因为tt函数属于window的！）
缺点也非常多：
1、事件一次只能绑定一个函数，例如上面的代码，后绑定的函数覆盖了前绑定的元素。
2、事件对象参数在IE中不能用（IE9可以， IE8 ,IE7 IE6均不可以） 上面绑定的函数的e在IE9以下版本会是undefined.ie中获取事件的对象的唯一方法就是window.event。
2、W3C DOM 事件绑定（除了IE其他主流浏览器均支持），如下代码所示
<html xmlns="http://www.w3.org/1999/xhtml">
<title></title>
</head>
<body>
<div id='sampleDiv'> click me!</div>
<br />
</body>
<script type="text/javascript">
document.getElementById("sampleDiv").addEventListener("click", function (e) {
alert(e);
alert(this.nodeName);
}, false);
document.getElementById("sampleDiv").addEventListener("click", function () {
alert(arguments[0]);
}, false);
</script>
</html>
首先说明下addEventListener函数，有3个参数，第一个是事件名称，第二个是处理函数，第三个是是否启用捕获型事件标识（一般不启用）。
点击click me!依次弹出 [object MouseEvent],DIV, [object MouseEvent] 。
现在很容易看出W3C Dom事件绑定的优点：
1、可以绑定多个处理函数互不覆盖。
2、this元素指向元素本身。
3、事件对象是绑定函数的第一个参数。
4、可以同时支持冒泡型和捕获型事件。
唯一的缺点就是在IE下不支持。
2、IE DOM 事件绑定（IE特有），如下代码所示
<html xmlns="http://www.w3.org/1999/xhtml">
<title></title>
</head>
<body>
<div id='sampleDiv'> click me!</div>
<br />
</body>
<script type="text/javascript">
document.getElementById("sampleDiv").attachEvent("onclick", function () {
//alert(e.type);
alert(arguments[0].type);
alert(window.event.type);
alert(this.nodeName);
});
document.getElementById("sampleDiv").attachEvent("onclick", function (e) {
alert(e.type);
});
</script>
</html>
点击 click me!弹出click,click,click,undefined.
现在很容易看出IE Dom事件绑定的优点：
1、可以同时绑定多个处理函数。
2、 获取事件对象可以从事件对象参数中获取 如果没有事件对象参数 可以从window.event或者arguments[0]获取。
缺点：
1、仅适用于IE
2、this关键字不是指向元素本身。
3、网上有很多文章说 attachEvent存在内存泄露的风险（我没有实际测试过），可以在页面的卸载onunload 事件中把事件反注册就可 element.detachEvent('onclick', doClick)。
好了今天就到这里。
