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

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

\

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

相关阅读:
ATF启动（五）：服务注册
笔记1.1 计算机网络基本概念
SIP会话发起协议 - 先知道是什么（一）
Linux或Centos查看CPU和内存占用情况_top只能查看对应的命令_如何查看具体进程---linux工作笔记062
企业电暖器装配线优化研究
[C++从入门到精通] 9.inline、const、mutable、this和static
推荐一个非常好用的uniapp的组件库【TMUI3.0】
新一代网状网协议T-Mesh无线通信技术优势介绍
问题记录：无法删除.dll文件，显示“文件已在Windows资源管理器中打开”
网络系统管理 - Windows AD Server主域控目录配置

原文地址：https://blog.csdn.net/m0_52946104/article/details/126966366