【JS】论元素的绑定和解绑事件

前言

  在JS的学习过程中，我们会了解到DOM，了解到元素，那么如何对一个元素进行绑定事件呢？事件绑定完之后可不可以解绑呢？都有什么方法呢？这都是今天我们要学习的内容。

方法

 方法一

功能	函数
绑定事件	对象.on事件名字 = 事件处理函数
解绑事件	对象.on事件名字 = null

  具体事例：

		<input type="button" value="绑定事件" id="btn1" />
		<input type="button" value="解绑事件" id="btn2" />
		
		<script src="common.js"></script>
		
		<!--解绑方式1-->
		<script>
		
			//绑定事件
			my$("btn1").onclick = function(){
				console.log("亲亲");
			};
			
			//解绑事件
			my$("btn2").onclick = function(){
				my$("btn1").onclick = null;
			};
		
		</script>

  补充：common.js是我自己封装的一个函数，里面具体代码如下：

function my$(id) {
	return document.getElementById(id);
};

 方法二

功能	函数
绑定事件	对象.addEventListener(“没有on的事件类型”，命名函数，false)；
解绑事件	对象.removeEventListener(“没有on的事件类型”，函数名字，false)；

  具体事例：

		<!--解绑方式2-->
	    <script>		
			function f1(){
				console.log("第一个");
			}
			function f2(){
				console.log("第二个");
			}
			
			my$("btn1").addEventListener("click",f1,false);
			my$("btn1").addEventListener("click",f2,false);
			
			//点击第二个按钮把第一个按钮绑定的事件解绑
			my$("btn2").onclick = function(){
			
				//解绑事件的时候，需要在绑定事件的时候，使用命名函数
				my$("btn1").removeEventListener("click",f1,false);
			};
		</script>

 方法三

功能	函数
绑定事件	对象.attachEvent(“on事件类型”，命名函数)；
解绑事件	对象.detachEvent(“on事件类型”，函数名字)；

  具体事例：

		<!--解绑方式3-->
		
		<script>
		
		function f1(){
			console.log("第一个");
		}
		
		function f2(){
			console.log("第二个");
		}
		
		my$("btn1").attachEvent("onclick",f1);
		my$("btn2").attachEvent("onclick",f2);
		
		my$("btn2").onclick = function(){
			my$("btn1").detachEvent("onclick",f1);
		}
		
		</script>

方法的不同

  首先先说方法一吧，如果用这个方法进行绑定事件，绑定多次，后面的会把前面绑定的事件干掉，就是前面的事件就不起作用了，所以这种方法一般不怎么常用。我们重点来区分一下方法二和方法三：

1.方法名不一样

2.参数个数不一样 addEventListener三个参数，attachEvent两个参数

3.addEventListener 谷歌火狐IE11支持，IE8不支持； attachEvent 谷歌火狐IE11不支持，IE8支持

4.this不同，addEventListener中的this是当前绑定事件的对象，attachEvent中的this是window

5.addEventListener中的事件类型（事件的名字）没有on；attachEvent中的事件类型（事件的名字）有on

兼容代码

		<script>
			//绑定事件的兼容
			function addEventListener(element,type,fn){
				if(element.addEventListener){
					element.addEventListener(type,fn,false);
				}else if(element.attachEvent){
					element.attachEvent("on"+type,fn);
				}else{
					element["on"+type] = fn;
				}
			}
			
			//解绑事件的兼容代码
			//为任意的一个元素，解绑对应的事件
			function removeEventListener(element,type,fnName){
				if(element.removeEventListener){
					element.removeEventListener(type,fnName,false);
				}else if(element.detachEvent){
					element.detachEvent("on"+type,fnName);
				}else{
					element["on"+type]=null;
				}
			}
			
			function f1(){
				console.log("第一个");
			}
			
			function f2(){
				console.log("第二个");
			}
			
			addEventListener(my$("btn1"),"click",f1);
			addEventListener(my$("btn1"),"click",f2);
			
			my$("btn2").onclick = function(){
				removeEventListener(my$("btn1"),"click",f1);
			};
			
		</script>

总结

  写出来的代码尽可能适用于所有的浏览器，所以，还有好多的内容等着自己去学习呢！