《JavaScript自定義事件》學習摘記
阿新 • • 發佈：2020-12-04
事情的起因是想開發一個類似部落格園標籤收藏時打書籤的功能,於是解析了部落格園的相關頁面和JS原始碼進行了一番研究和學習.
過程漫漫與曲折,但收穫不少.期間
如在看到部落格園彈tag書籤視窗的html原始碼有一處標籤<div id="cover_block"></div>時,搜尋到了《JavaScript自定義事件》 這篇文章，冥冥之中有某些安排與聯絡。
1 <body> 2 <!-- 遮罩層 --> 3 <div id="pageCover" class="pageCover"></div> 4 5<input type="button" value="Dialog Test" onclick="openDialog();" /> 6 7 <div id="dlgTest" class="dialog"> 8 <img class="close" alt="" src="images/close.png"> 9 <div class="title">Dialog</div> 10 <div class="content"> 11 </div> 12 </div> 1314 <script type="text/javascript"> 15 function EventTarget() { 16 this.handlers = {};//儲存所有的事件處理程式,目的是統一管理 17 } 18 19 EventTarget.prototype = { 20 constructor: EventTarget, 21 addHandler: function (type, handler) { 22 if (typeof this.handlers[type] == 'undefined') { //read property 'close' 23 this.handlers[type] = new Array(); 24 } 25 this.handlers[type].push(handler);//★學習點與語法:用字面量動態定義物件屬性,而這裡屬性的型別是Array 26 }, 27 removeHandler: function (type, handler) { 28 if (this.handlers[type] instanceof Array) { 29 var handlers = this.handlers[type]; 30 for (var i = 0, len = handlers.length; i < len; i++) { 31 if (handler[i] == handler) { 32 handlers.splice(i, 1); 33 break; 34 } 35 } 36 } 37 }, 38 trigger: function (event) { 39 if (!event.target) { 40 event.target = this;//這裡指代Dialog物件 41 } 42 if (this.handlers[event.type] instanceof Array) { //判斷字面量屬性是否存在,如close 43 var handlers = this.handlers[event.type]; 44 for (var i = 0, len = handlers.length; i < len; i++) { 45 //handlers[i]();這裡2句程式碼效果一致 46 handlers[i](event);//★學習點與語法,這裡呼叫150行的方法 47 } 48 } 49 } 50 } 51 </script> 52 53 <script type="text/javascript"> 54 //工具方法用於繼承 55 function extend(subType, superType) { 56 var prototype = Object(superType.prototype); 57 prototype.constructor = subType; 58 subType.prototype = prototype; 59 } 60 </script> 61 62 <script type="text/javascript"> 63 function Dialog(id) { 64 EventTarget.call(this) //效果是讓子類擁有父類的原生屬性,這裡this指Dialog物件,當執行150行時,將自定義事件close註冊給EventTarget的handlers屬性 65 this.id = id; //換句話說,讓EventTargert的屬性放到this上,即this繼承了EventTarget的屬性 66 var that = this; 67 document.getElementById(id).children[0].onclick = function () { //繫結/註冊關閉事件處理方法 68 that.close(); 69 } 70 } 71 72 extend(Dialog, EventTarget); 73 74 Dialog.prototype.show = function () { 75 var dlg = document.getElementById(this.id); 76 dlg.style.display = 'block'; 77 dlg = null; 78 } 79 80 Dialog.prototype.close = function () { 81 var dlg = document.getElementById(this.id); 82 dlg.style.display = 'none'; 83 dlg = null; 84 this.trigger({ type: 'close' }); 85 } 86 </script> 87 88 <script type="text/javascript"> 89 //由頁面標籤直接繫結事件觸發 90 function openDialog() { 91 var dlg = new Dialog('dlgTest'); 92 93 dlg.addHandler('close', function () { 94 document.getElementById('pageCover').style.display = 'none'; 95 }); 96 97 document.getElementById('pageCover').style.display = 'block'; 98 dlg.show(); 99 } 100 </script> 101 </body>