給一個對象綁定多個事件處理函數：
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>