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

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

 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>

 

 

 

 

你可能感兴趣的:(JavaScript)