首页 > 代码库 > Javascript 事件对象（四）一个事件绑定多个不同的函数

Javascript 事件对象（四）一个事件绑定多个不同的函数

2024-07-08 00:20:05   227人阅读

给一个对象绑定多个事件处理函数：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <script>
 7 //给一个对象绑定一个事件处理函数的第一种形式
 8 //obj.onclick = fn;
 9 function fn1() {
10     alert(this);
11 }
12 function fn2() {
13     alert(2);
14 }
15 
16 //document.onclick = fn1;
17 //document.onclick = fn2;    //会覆盖前面绑定fn1
18 
19 //给一个对象的同一个事件绑定多个不同的函数
20 //给一个元素绑定事件函数的第二种形式
21 
22 /*
23 ie：obj.attachEvent(事件名称，事件函数);
24     1.没有捕获
25     2.事件名称有on
26     3.事件函数执行的顺序：标准ie-》正序   非标准ie-》倒序
27     4.this指向window
28 标准：obj.addEventListener(事件名称，事件函数，是否捕获);
29     1.有捕获
30     2.事件名称没有on
31     3.事件执行的顺序是正序
32     4.this触发该事件的对象
33 */
34 
35 /*document.attachEvent(‘onclick‘, function() {
36     fn1.call(document);
37 });
38 document.attachEvent(‘onclick‘, fn2);*/
39 
40 //是否捕获 : 默认是false    false:冒泡 true：捕获
41 
42 /*document.addEventListener(‘click‘, fn1, false);
43 document.addEventListener(‘click‘, fn2, false);*/
44 
45 function bind(obj, evname, fn) {
46     if (obj.addEventListener) {
47         obj.addEventListener(evname, fn, false);
48     } else {
49         obj.attachEvent(‘on‘ + evname, function() {
50             fn.call(obj);
51         });
52     }
53 }
54 
55 bind(document, ‘click‘, fn1);
56 bind(document, ‘click‘, fn2);
57 </script>
58 </head>
59 
60 <body>
61 </body>
62 </html>

 

 

事件取消：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <script>
 7 /*
 8 第一种事件绑定形式的取消
 9 */
10 function fn1() {
11     alert(1);
12 }
13 function fn2() {
14     alert(2);
15 }
16 
17 //document.onclick = fn1;
18 //document.onclick = null;    //取消
19 
20 /*
21 ie : obj.detachEvent(事件名称，事件函数);
22 标准 : obj.removeEventListener(事件名称，事件函数，是否捕获);
23 */
24 /*document.attachEvent(‘onclick‘, fn1);
25 document.attachEvent(‘onclick‘, fn2);
26 document.detachEvent(‘onclick‘, fn1);*/
27 
28 document.addEventListener(‘click‘, fn1, false);
29 document.addEventListener(‘click‘, fn1, true);
30 document.addEventListener(‘click‘, fn2, false);
31 
32 document.removeEventListener(‘click‘, fn1, false);
33 </script>
34 </head>
35 
36 <body>
37 </body>
38 </html>

 

 

 

 


联系
我们