《JavaScript自定义事件》学习摘记

事情的起因是想开发一个类似博客园标签收藏时打书签的功能,于是解析了博客园的相关页面和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>
 13 
 14   <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);//★学习点与语法,这里调用94行的方法
 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>

1.为Dialog关闭按钮注册事件67行
2.设计自己的事件处理器，触发trigger的，同时传入自定义事件对象84行
3.声明遮罩层pageCover关闭处理逻辑94行
4.大量的JS面向对象编程的思想,如继承,64行,72行.

 

posted @ 2020-12-04 16:32  轴轴  阅读(127)  评论(0)  编辑  收藏  举报