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

以你之姓@ 2022-03-25 11:10 297阅读 0赞

# 前言 #

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

# 方法 #

##  方法一 ##

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>函数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>绑定事件</td> 
   <td>对象.on事件名字 = 事件处理函数</td> 
  </tr> 
  <tr> 
   <td>解绑事件</td> 
   <td>对象.on事件名字 = null</td> 
  </tr> 
 </tbody> 
</table>

具体事例：

<input type="button" value="绑定事件" id="btn1" />
    		<input type="button" value="解绑事件" id="btn2" />
    		
    		<script src="common.js"></script>
    		
    		
    		<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);
    };

##  方法二 ##

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>函数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>绑定事件</td> 
   <td>对象.addEventListener(“没有on的事件类型”，命名函数，false)；</td> 
  </tr> 
  <tr> 
   <td>解绑事件</td> 
   <td>对象.removeEventListener(“没有on的事件类型”，函数名字，false)；</td> 
  </tr> 
 </tbody> 
</table>

具体事例：

<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>

##  方法三 ##

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>函数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>绑定事件</td> 
   <td>对象.attachEvent(“on事件类型”，命名函数)；</td> 
  </tr> 
  <tr> 
   <td>解绑事件</td> 
   <td>对象.detachEvent(“on事件类型”，函数名字)；</td> 
  </tr> 
 </tbody> 
</table>

具体事例：

<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

# 兼容代码 #

# 总结 #

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