Javascript中的事件绑定详解

阅读() @2019-03-17 16:05:00

一说起Javascript中的事件绑定,我们首先想到的就是鼠标点击或者是鼠标滑过之后运行一个函数等等,事实确实是这样,一般的写法是这样的:

document.onclick = function(){

}

但是如果我们在工作中遇到这样一种情况:点击一个对象的时候,需要同时运行两个不同的函数(绑定两个不同的事件),这两个事件的功能肯定是不一样的,要是一样的话,直接写在一块儿就行,没有必要分开了。

怎么绑定呢?Javascript提供了两种不同的绑定事件的方法,但是这两种方法都不能做到100%的兼容,代码如下:

IE9以下兼容:(通过attachEvent来绑定事件)

document.body.attachEvent("onclick",function(){
	fn.call(document.body);
});
function fn(){
	alert(this.innerHTML);
}

IE9以上和谷歌、火狐等浏览器兼容:(通过addEventListener来监听绑定事件)

document.body.addEventListener("click",fn,false)
function fn(){
	alert(this.innerHTML);
}

如何做到一段代码兼容所有的浏览器呢?这里可以参考一下Jquery的写法,我们来变通下:

(function bind(ev,evName){
	if(window.addEventListener){
                 //判断:如果浏览器支持addEventListener,则执行:
		document.body.addEventListener(ev,evName,false);
	}else{
                //如果不支持addEventListener,则执行:
		document.body.attachEvent("on"+ev,function(){
			fn.call(document.body);
		})
	}
})("click",fn)
function fn(){
	alert(this.innerHTML);
}

我为了方便,我们也可以直接使用jquery提供的bind方法来实现绑定,代码如下:

$("li").bind("click mouseover",function(){
	console.log(123);
})

解除事件绑定的方法如下:

function removeBind(obj, eventName, fn){
		if( window.removeEventListener ){
			obj.removeEventListener(eventName, fn, false);
		}else{
			obj.detachEvent('on'+eventName, fn);
		}
	}

关于addEventListener方法的三个参数的用法,与事件捕获与事件冒泡优化,详细可查看《Javascript中的事件冒泡与阻止冒泡的方法与原理》。

使用事件绑定的好处很多,比如说你用javascript动态创建了几个元素,想要给这几个元素添加点击事件或者是鼠标滑过事件,最后发现根本不起作用,就是这个原因,因为它是动态创建的,在网页源代码中看不到,所以必须使用事件委托或者是事件绑定才能进行操作,关于这方面的内容,我已经详细整理在《JavaScript与jQuery事件委托的写法》一文中了!

(完)!

微信二维码