jacascript事件的绑定_js script module 绑定点击事件-优快云博客

本文链接：https://blog.youkuaiyun.com/baidu_41861751/article/details/83863920

本文深入探讨了不同事件绑定方法的特点及应用，包括直接赋值、addEventListener、attachEvent及自定义兼容函数，阐述了它们在现代网页开发中的作用及兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

效果：不弹出1 直接弹出2

代码如下：

<!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及其以下的不兼容

效果图

<!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
              参数二：回调函数

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

效果图

代码

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