给一个对象绑定多个事件处理函数：
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>