这是我参与8月更文挑战的第27天，活动详情查看：8月更文挑战

前言

上篇我们了解了常用的事件，本文我们聊聊如何给DOM元素绑定事件处理函数

绑定事件的多种方式和区别

1. 直接写在html标签的行间上

<input type="text" name="user" value="请输入用户名" style="color:#999" 
onfocus="if(this.value=='请输入用户名'){this.value = '';this.style.color='#424242'}" 
onblur="if(this.value == ''){this.value = '请输入用户名';this.style.color='#999'}" >

2. ele.onxxx = function(e){}

odiv.onclick = function(e){
  console.log(e);
}

兼容性很好

但是根据js的特点，这种赋值的方式肯定会被后面的值覆盖。因此这种方式绑定事件处理函数规则是：同一个元素同一个事件只能绑定一个处理函数。等同于第一种写在行间。

3. ele.addEventListener(事件类型,处理函数,false)

odiv.addEventListener('click',function(e){
    console.log(1);
},false)
odiv.addEventListener('click',function(e){
    console.log(2);
},false)

IE8及以下不兼容

通过addEventListener绑定的方式，同个元素的同一个事件可以绑定多个处理函数，不会被覆盖。

4. ele.attachEvent("on"+事件类型，处理函数)

odiv.attachEvent("onclick",function(e){
  console.log(e)
})
odiv.attachEvent("onclick",function(e){
  console.log(e.target)
})

attachEvent跟addEventListener 基本一致，也是同一个元素的同一个事件可以绑定多个处理函数，不会被覆盖。不同的是attachEvent可以绑定的函数是可以重复的，即即使绑定同一个函数都不会不覆盖。

function fn(){
  console.log(arguments)
}
odiv.attachEvent("onclick",fn)
odiv.attachEvent("onclick",fn)
//打印两次

关于this

以上几种事件绑定方式里面的this指向有点区别：

1. 通过ele.onxxx = fn；处理函数fn里面this指向ele本身
2. 通过ele.addEventListener(type,fn,false);fn里面this指向ele本身
3. 通过ele.attachEvent(onxxx,fn);fn里面this指向window

也比较好理解，IE独有的特殊一点指向window，其他都指向dom元素本身

封装一个兼容性的方法，用于绑定事件：

function bindEvent(ele,type,handleFn){
	if (ele.addEventListener) {
		ele.addEventListener(type,handleFn,false);
	}else if{
		ele.attachEvent('on'+type,function(){
			handleFn.call(ele)
		});
	}else{
		ele['on'+type] = handleFn;
	}
}

有的时候我们希望解除事件处理函数，那怎么办呢？

解除事件处理函数的三种方式

其实解除事件处理函数也对应有办法方法：

1. ele.onxxx = false / ' ' / null
2. ele.removeEventListener(type,fnName,false)
3. ele.attachEvent('on' + type,fnName)

值得注意的是：若干绑定的事件处理函数是匿名函数，则无法解除绑定！