同一个按钮想绑定多个事件的方法

内心的一片海

于 2022-09-21 11:04:04 发布

阅读量1.6k

点赞数

分类专栏： jsp 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_52946104/article/details/126966366

版权

jsp 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

addEventListener（）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				/**
				 * 点击按钮弹出内容
				 */
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function() {
					alert("sdfasdfsadf")
				}
				//绑定的第二个函数并没有被触发
				btn01.onclick = function() {
					alert("s1111111111df")
				}
				/**
				 * addEventListener()
				 * - 通过这个方法也可以为元素绑定响应函数
				 * - 参数
				 *   1. 事件的字符串，不要on
				 *   2.回调函数，当事件触发时该函数会被调用
				 *   3. 是否在捕获阶段触发函数时间，需要一个布尔值，一般都传false；
				 */
				btn01.addEventListener("click", aaa, false);

				function aaa() {
					alert("3333333333")
				}
			}
		</script>
	</head>
	<body>
		<button id="btn01"> 事件</button>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				bind(btn01, "click", function() {
					alert("444444444" + this)
				});
				/**
				 * 点击按钮弹出内容
				 */
				// var btn01 = document.getElementById("btn01");
				// btn01.onclick = function() {
				// 	alert("sdfasdfsadf")
				// }
				// //绑定的第二个函数并没有被触发
				// btn01.onclick = function() {
				// 	alert("s1111111111df")
				// }
				/**
				 * addEventListener()
				 * - 通过这个方法也可以为元素绑定响应函数
				 * - 参数
				 *   1. 事件的字符串，不要on
				 *   2.回调函数，当事件触发时该函数会被调用
				 *   3. 是否在捕获阶段触发函数时间，需要一个布尔值，一般都传false；
				 *  4. 该浏览器不支持ie8 以及以下版本
				 */
				btn01.addEventListener("click", aaa, false);
				btn01.addEventListener("click", bbb, false);

				function bbb() {
					//alert(this+"2222222222")
				}

				function aaa() {
					//alert("3333333333")
				}

				/**
				 * attachEvent()
				 * 在IE8以及以下可以使用attachEvent（）来帮绑定事件
				 * - 参数：
				 * 1.事件的字符串，要on
				 * 2.  回调函数
				 * 
				 */
				btn01.attachEvent("onclick", function() {
					//	alert(this)
				})



				/**
				 * 定义一个函数，用来绑定响应的函数
				 * addEventListener()中的的this 是绑定事件的对象
				 * attachEvent（）中this 是window
				 * 需要统一this
				 */
				/**
				 * 参数：
				 * obj 要绑定事件的对象
				 * eventStr 事件的字符串（不要on）
				 * callback 回调函数
				 */
				function bind(obj, eventStr, callback) {
					if (obj.addEventListener) {
						obj.addEventListener(eventStr, callback, false);
					} else {
						
						解决ie8以下版本this 是指的window  而不是当前调用对象的问题
						/**
						 * this 是谁由调用的方式决定
						 * callback。call（obj）
						 */
						//IE8以及以下版本

						obj.attachEvent("on" + eventStr, function() {
							//在匿名函数中调用函数
							callback.call(obj);
							

						});
					}
				}



			}
		</script>
	</head>
	<body>
		<button id="btn01"> 事件</button>
	</body>
</html>