如何绑定事件处理函数：
1.ele.onxxx = function(event){}
兼容性很好，但是一个元素的同一事件上只能绑定一个处理程序
基本上等同于写在HTML行间上
2.obj.addEventListener(事件类型,处理函数,false);
IE9以下不兼容，可以为一个事件绑定多个处理程序
3.obj.attachEvent(“on”+事件类型,fn);
IE独有，一个事件同样可以绑定多个处理程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<div style="width:100px;height:100px;background-color:red"></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
div.addEventListener("click",function(){
console.log("123");
},false)
</script>
</body>
</html>
每点击一次方块，执行一次console.log(“123”);事件有一个时刻监听的机制，在那里等着，一旦点我，我就执行，这种事件监听机制需要消耗精力，所以不能是JS引擎干的吧！也是第三部分其他部分做的。
这样写是两个123.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<div style="width:100px;height:100px;background-color:red"></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
div.addEventListener("click",function(){
console.log("123");
},false)
div.addEventListener("click",function(){
console.log("123");
},false)
</script>
</body>
</html>
再看这样写：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<div style="width:100px;height:100px;background-color:red"></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
div.addEventListener("click",test,false);
div.addEventListener("click",test,false);
function test(){
console.log("123");
}
</script>
</body>
</html>
点一次执行出来一个123.
这两个程序是两回事
addEventListener能给同一个对象的同一个事件绑定多个处理函数，是这两个的处理函数的地址是不一样的，长得一样，地址不一样。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<div style="width:100px;height:100px;background-color:red"></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
div.attachEvent("onclick",function(){
console.log("123");
});
</script>
</body>
</html>
IE独有。
练习44：
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
使用原生js，addEventListener，给每一个li元素绑定click事件，输出他们的顺序。
(当你点击第一个li的时候输出0，点击第二个li的是时候输出1…或者点击第一个li的时候输出1，点击第二个li的时候输出2.。。)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
<script type="text/javascript">
var liCol = document.getElementsByTagName("li");
var len = liCol.length;
for(var i = 0; i < len; i ++){
liCol[i].addEventListener("click",function(){
console.log(i);
},false);
}
</script>
</body>
</html>
是不是这样写，绑定个事件，点哪个出哪个li的序号，多么正确的想法啊！
怎么看着怎么对，但是，你看：
点哪个li都是4！！是闭包吧，你想把i贴到元素上去，贴不上吧，事件相当于把这个函数放到属性上，但是什么时候执行这个函数不好说吧，至少是for循环结束以后，
for循环结束以后的那个i已经变成4了，所以怎么解决这个问题，立即执行函数吧！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
<script type="text/javascript">
var liCol = document.getElementsByTagName("li");
var len = liCol.length;
for(var i = 0; i < len; i ++){
(function(i){
liCol[i].addEventListener("click",function(){
console.log(i);
},false);
}(i))
}
</script>
</body>
</html>
这样就完事了吧！所以这里绑定事件要记住：一旦你这个事件出现在了循环里面你就要考虑是否形成了闭包！如果你这个绑定事件的处理函数里面没有用到i的话，那随便。