jacascript事件的绑定

清疚 2022-04-18 04:46 200阅读 0赞

**一、  使用对象.事件=函数的形式绑定响应函数**

它只能同时为一个元素的一个事件绑定一一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

效果：不弹出1  直接弹出2  
         ![2018110816484458.gif][]

代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>事件的绑定</title>
    		
    	    <script>
    	    	window.onload= function (){
    	    		var btn = document.getElementById("btn");
    	    		btn.onclick =function (){
    	    			alert(1);
    	    		}
    	    		btn.onclick =function (){
    	    			alert(2);
    	    		}
    	    	}
    	    </script>
    	</head>
    	<body>
    		<button id="btn">点击我</button>
    	</body>
    </html>

二、通过该方法addEventListener()为元素添加绑定响应函数，可以绑定多个响应函数，会按照绑定的顺序进行执行

参数一： 事件的字符串（注意不要有on，，，比如onclick,  就写“click”）  
                参数二；回调函数，当事件触发时会调用该函数  
                参数三：是否在捕获阶段触发事件，需要一个布尔值，一般都传false

**  这个方法虽然好    但是IE8及其以下的不兼容**

效果图

![20181108170152991.gif][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>事件的绑定</title>
    		
    	    <script>
    	    	//addEventListener()
    	    	/*
    	    	    参数一： 事件的字符串
    	    	    参数二；回调函数，当事件触发时会调用该函数
    	    	    参数三：是否在捕获阶段触发事件，需要一个布尔值，一般都传false
    	    	 * */
    	    	window.onload= function (){
    	    		var btn = document.getElementById("btn");
    	    		btn.addEventListener("click",function(){
    	    			alert(1);
    	    		},false);
    	    		btn.addEventListener("click",function(){
    	    			alert(2);
    	    		},false);
    	    		
    	    	}
    	    </script>
    	</head>
    	<body>
    		<button id="btn">点击我</button>
    	</body>
    </html>

三、attachEvent方法  (**适用于ie8及其以下的浏览器**)

这个方法各addEventListener其实是差不多的

这个IE8中可以使用这个函数

attachEvent()  
                     参数一：事件的字符串  要on  
                     参数二：回调函数

运行的顺序是先绑定的后执行（其实我们不必要太纠结這个，运行的顺序的问题，既然我们都把事件分开写了，浪它执行的顺序就没有多大的关系，如果你就是要先绑定的先执行，你可以就写在一个函数中）

效果图

![20181108172139609.gif][]

代码

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>事件的绑定</title>
    		
    	    <script>
    	    	
    	    		/*
    	    		 	attachEvent()
    	    		 	参数一：事件的字符串  要on
    	    		 	参数二：回调函数 
    	    		 */
    	    		btn.attachEvent("onclick",function(){
    	    			alert("1");
    	    		});
    	    		btn.attachEvent("onclick",function(){
    	    			alert("2");
    	    		});
    	    		btn.attachEvent("onclick",function(){
    	    			alert("3");
    	    		});
    	    		
    	    	}
    	    </script>
    	</head>
    	<body>
    		<button id="btn">点击我</button>
    	</body>
    </html>

四、我们自己写一个函数 兼容所有的浏览器

参数一:   obj要绑定事件的对象  
                    参数二：evenStr 事件的字符串  不要on  
                    参数三：callback 回调函数

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>事件的绑定</title>
    		
    	    <script>
    	    	
    	    	window.onload= function (){
    	    		bind(btn,"click",function(){
    	    			alert("1");
    	    		});
    	    		bind(btn,"click",function(){
    	    			alert("2");
    	    		});
    	    		bind(btn,"click",function(){
    	    			alert("3");
    	    		});
    	    		
    	    		function bind (obj,evenStr,callback){
    	    			if(obj.addEventListener){
    	    				 	//正常的浏览器
    	    					obj.addEventListener(evenStr,callback,false);
    	    			}else{
    	    				    //ie8的及其以下的
    	    					obj.addEventListener("on"+evenStr,callback);
    	    			}
    	    			
    	    		}
    	    		
    	    	}
    	    </script>
    	</head>
    	<body>
    		<button id="btn">点击我</button>
    	</body>
    </html>

[2018110816484458.gif]: /images/20220418/47a1339605bb4ee49083aa87b39602d4.png
[20181108170152991.gif]: /images/20220418/c5f38da614014e87b566f2327b3a1a5f.png
[20181108172139609.gif]: /images/20220418/7494a7b2cbab4705bb5913325f6b6ac4.png