JS 绑定事件处理函数三个方法 及 各自事件解绑方法

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(){//处理函数2
  console.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>