原生js绑定事件的多种方式及其区别

「这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战」

js事件是为了实现用户交互，比如当用户鼠标点击或者键盘输入时，浏览器会监听截获并且通知js做出反馈执行相应的函数，实现交互

今天我们来聊聊原生js绑定事件的多种方式及其区别

直接写在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'}" >
复制代码

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绑定的方式，同个元素的同一个事件可以绑定多个处理函数，不会被覆盖。

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指向有点区别：

通过ele.onxxx = fn；处理函数fn里面this指向ele本身
通过ele.addEventListener(type,fn,false);fn里面this指向ele本身
通过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;
	}
}
复制代码

原生js绑定事件的多种方式及其区别

Guess you like