HTML 事件处理程序：
缺点：html 和 js 耦合性太高 （如果改动方法名 那么就要改HTML 代码和JS代码 )
优点： 兼容性强
1 <input type="button" id="btn1" value="btn1" onclick="alert(this.value)">
Dome 0 级事件处理程序：
把函数赋值给一个事件的属性。
简单，跨浏览器
1 var btn2 = document.getElementById(‘btn2‘);
2 // dome 0 级 加载事件
3 btn2.onclick = function() {
4 alert(‘hello world‘);
5 }
6
7 // dome 0 级 取消加载事件
8 // btn2.onclick = null;
Dome 2 级 事件处理程序(IE9 一下不适用)：
两个方法 addEventListener(),removeEventListener()
接收三个参数 1.事件名 2. 事件处理函数 3. 布尔值 （true 表示事件捕获， false 表示事件冒泡）
1 // dome 2 级 加载事件 事件名前不需要加ON 2 var btn3 = document.getElementById(‘btn3‘); 3 btn3.addEventListener(‘click‘, btn3fun, false); 4 5 btn3.addEventListener(‘click‘, btn2fun, false);
IE事件处理程序(听说IE11 已经废弃了这两个方法)：
两个方法 attachEvent() detachEvent()
接收两个参数， 1.事件名 2. 处理函数
问： 这里为什么没有布尔值？
答： IE9 之前只支持冒泡
1 // IE 的事件处理程序 事件名前需要加on IE 11已经移除了这两个方法 2 var btn4 = document.getElementById(‘btn4‘); 3 // alert(btn4[‘value‘]); 4 btn4.attachEvent(‘onclick‘, btn3fun); 5 btn4.detachEvent(‘onclick‘, btn3fun);
全面实例：
1 <html>Hello Javascript</title>
2
3 </head>
4
5
6 <body bgcolor="yellow">
7 <h1>Hello world</h1>
8 <!-- html 加载事件 -->
9 <input type="button" id="btn1" value="btn1" onclick="alert(this.value)">
10 <input type="button" id="btn2" value="btn2">
11 <input type="button" id="btn3" value="btn3">
12 <input type="button" id="btn4" value="btn4">
13
14 </body>
15 <!-- 注意加载顺序 -->
16 <script type="text/javascript">
17 var btn2 = document.getElementById(‘btn2‘);
18 // dome 0 级 加载事件
19 btn2.onclick = function() {
20 alert(‘hello world‘);
21 }
22 btn2.onclick = btn3fun;
23 //dome 0 级 只识别最后一个加载事件
24 btn2.onclick = btn2fun;
25 // dome 0 级 取消加载事件
26 // btn2.onclick = null;
27
28 function btn2fun(){
29 alert(‘btn2‘);
30 };
31
32 function btn3fun() {
33 alert(‘this is btn3 function‘);
34 }
35
36 // dome 2 级 加载事件 事件名前不需要加ON
37 var btn3 = document.getElementById(‘btn3‘);
38 btn3.addEventListener(‘click‘, btn3fun, false);
39
40 btn3.addEventListener(‘click‘, btn2fun, false);
41 //卸载事件的方法应该和加载时的参数一样 匿名函数卸载不了
42 btn3.removeEventListener(‘click‘, btn3fun, true);
43 // addEventListener 添加的事件 只能通过removeEventListener 删除
44 btn3.onclick = null;
45
46 // IE 的事件处理程序 事件名前需要加on IE 11已经移除了这两个方法
47 var btn4 = document.getElementById(‘btn4‘);
48 // alert(btn4[‘value‘]);
49 btn4.attachEvent(‘onclick‘, btn3fun);
50 btn4.detachEvent(‘onclick‘, btn3fun);
51
52
53 </script>
54 </html>
关于什么是 事件冒泡 ， 事件捕获 请看这位仁兄的博客：http://www.cnblogs.com/janes/p/3912677.html
Javascript 事件 笔记 1,布布扣,bubuko.com
时间： 2024-10-20 11:23:04