1 .ele.onxxx = function([event]){}
xxx：事件类型
event：事件对象（可选）
div.onclick = function(){console.log(1);}
兼容性很好，但是一个元素的同一个事件只能绑定一个处理程序
如果说给同一个元素绑定了两次或者多次相同类型的事件，那么后面的绑定会覆盖前面的绑定
不支持 DOM 事件流 事件捕获阶段➡目标元素阶段➡事件冒泡阶段
div.onclick = function(){console.log(1);} div.onclick = function(){console.log(2);}
这种写法基本等同与写在HTML行间上
即
div.onclick = function(){console.log(3);}
等同于
<div onclick = "console.log(3);">
运行环境：事件处理函数里的this指向的是dom元素本身
div.onclick = function(){console.log(this)}
解除绑定事件ele.onxxx = null/false
div.onclick = function(){console.log(3);div.onclick = null;}
2 .ele.addEventListener(type,fn,false)
第一个参数：事件类型第二个参数：处理函数的引用第三个参数：若为false，该对象这一事件遵循的处理模型为事件冒泡；若为true，则为事件捕获IE9以下不兼容，W3C标准，可以为一个事件绑定多个处理程序，按绑定的顺序执行
支持 DOM 事件流的
div.addEventListener('click',function(){console.log(0);},false);div.addEventListener('click',function(){console.log('hh');},false)
给同一事件多次绑定同一处理函数，只会执行一次
div.addEventListener('click',test,false);div.addEventListener('click',test,false);function test(){console.log(0);}
区分
下面给同一事件绑定的是不同的处理函数（这里的不同是指存储地址不同）
div.addEventListener('click', function (){console.log(0);},false);div.addEventListener('click', function (){console.log(0);},false);
运行环境：事件处理函数里的this指向的是dom元素本身
div.addEventListener('click',function(){console.log(this)},false)
解除绑定事件ele.removeEventListener(type,fn,false)
div.addEventListener('click',test,false);//处理函数1 若绑定的是匿名函数 则无法解绑div.addEventListener('click',function(){//处理函数2console.log('hh');div.removeEventListener('click',test,false)//解除处理函数1的绑定},false)function test(){console.log(0);}
3 .ele.attachEvent('on'+type,fn)---- IE独有
第一个参数：‘on’+事件类型第二个参数：处理函数的引用一个事件同样可以绑定多个处理程序，且可以给同一事件多次绑定同一处理函数，可以执行多次
只支持事件冒泡，不支持事件捕获
//给同一事件多次绑定同一事件处理函数，点击1次div，test函数会执行两次div.attachEvent('onclick',test)div.attachEvent('onclick',test)function test(){console.log(22)}
运行环境：事件处理函数里的this指向window
div.attachEvent('onclick',function(){console.log(this); --->window})
如果我们希望attachEvent方法的处理函数里的this指向被绑定的dom元素，可以进行如下操作
div.attachEvent('onclick',function(){handle.call(div);})function handle(){//this指向div}
解除绑定事件ele.detachEvent('on'+type,fn)
div.attachEvent('onclick',test)//若绑定的是匿名函数 则无法解绑div.attachEvent('onclick',function(){console.log(33);div.detachEvent('onclick',test);//解除test事件处理函数的绑定})function test(){console.log(22)}
封装兼容性的addEvent(elem,type,handle)方法，给dom对象绑定指定类型的事件处理函数
function addEvent(elem,type,handle){if(elem.addEventListener){//IE9以下不兼容elem.addEventListener(type,handle,false)}else if(elem.attachEvent){//IE独有elem.attachEvent('on'+type,funciton(){handle.call(elem)})}else{//只能绑定一个事件处理函数elem['on'+type] = handle}}
经典例题
给4个li绑定点击事件，实现点击不同li输出相对应的序号
<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><script>var liList = document.getElementsByTagName('li');var len = liList.length;for(var i = 0;i<len;i++){(function(i){//自调函数解决闭包问题liList[i].addEventListener('click',function(){console.log(i+1)},false)})(i);}</script>
