AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript自定义事件

2017-11-04 913
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

很多DOM对象都有原生的事件支持，向div就有click、mouseover等事件，事件机制可以为类的设计带来很大的灵活性，相信.net程序员深有体会。随着web技术发展，使用JavaScript自定义对象愈发频繁，让自己创建的对象也有事件机制，通过事件对外通信，能够极大提高开发效率。

简单的事件需求

事件并不是可有可无，在某些需求下是必需的。以一个很简单的需求为例，在web开发中Dialog很常见，每个Dialog都有一个关闭按钮，按钮对应Dialog的关闭方法，代码看起来大概是这样

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            .dialog
            {
                position:fixed;
                width:300px;
                height:300px;
            z-index: 30;  
                top : 50% ;  left : 50% ;  
                margin-top : -200px ;  margin-left : -200px ;  
                box-shadow : 2px 2px 4px #ccc ;  
                background-color : #f1f1f1 ;  
                display : none ; 
             }  
            
            .dialog .title 
            {  
                font-size : 16px ;  
                font-weight : bold ;  
                color : #fff ;  
                padding : 4px ;  
                background-color : #404040 ; 
             }  
            
            .dialog .close 
            {  
                width : 20px ;  
                height : 20px ;  
                margin : 3px ;  
                float : right ;  
                cursor : pointer ; 
             } 
         </ style > 
     </ head > 
     < body > 
    
     < input type ="button"  value ="Dialog Test"  onclick ="openDialog();" /> 
    
     < div id ="dlgTest"  class ="dialog" > 
         < img class ="close"  alt =""  src ="images/close.png" > 
         < div class ="title" >Dialog </ div > 
         < div class ="content" > 
        
         </ div > 
     </ div > 
    
     < script type ="text/javascript" > 
         function  Dialog(id){ 
            this .id = id; 
            var  that = this ; 
            document.getElementById(id).children[ 0 ].onclick = function (){ 
                that.close(); 
            } 
        } 
        
        Dialog.prototype.show = function (){ 
            var  dlg = document.getElementById( this .id); 
            dlg.style.display = ' block ' ; 
            dlg = null ; 
        } 
        
        Dialog.prototype.close = function (){ 
            var  dlg = document.getElementById( this .id); 
            dlg.style.display = ' none ' ; 
            dlg = null ; 
        } 
    </ script > 
    
     < script type ="text/javascript" > 
         function  openDialog(){ 
            var  dlg = new  Dialog( ' dlgTest ' ); 
            dlg.show(); 
        } 
    </ script > 
     </ body > 
< html >
复制代码

 

这样在点击button的时候就可以弹出Dialog，点击关闭按钮的时候隐藏Dialog，看起来不错实现了需求，但总感觉缺点儿什么，一般Dialog显示的时候页面还会弹出一层灰蒙蒙半透明的罩子，阻止页面其它地方的点击，Dialog隐藏的时候罩子去掉，页面又能够操作。加些代码添个罩子。

在body顶部添加一个pagecover

<div id="pageCover" class="pageCover"></div>

为其添加style

复制代码 
.pageCover
            {
                width:100%;
                height:100%;
                position:absolute;
                z-index:10;
                background-color:#666;
                opacity:0.5;
                display:none;
            }
复制代码

为了打开的时候显示page cover，需要修改openDialog方法

复制代码 
function openDialog(){
            var dlg=new Dialog('dlgTest');
            document.getElementById('pageCover').style.display='block';
            dlg.show();
        }
复制代码

 

image

效果很不错的样子，灰蒙蒙半透明的罩子在Dialog弹出后遮盖住了页面上的按钮，Dialog在其之上，这时候问题来了，关闭Dialog的时候page cover仍在，没有代码其隐藏它，看看打开的时候怎么显示的page cover，关闭的时候怎么隐藏行了! 还真不行，打开的代码是页面button按钮的事件处理程序自己定义的，在里面添加显示page cover的方法合情合理，但是关闭Dialog的方法是Dialog控件（虽然很简陋，远远算不上是控件）自己的逻辑，和页面无关，那修改Dialog的close方法可以吗？也不行！有两个原因，首先Dialog在定义的时候并不知道page cover的存在，这两个控件之间没有什么耦合关系，如果把隐藏page cover逻辑写在Dialog的close方法内，那么dialog是依赖于page cover的，也就是说页面上如果没有page cover，dialog就会出错。而且Dialog在定义的时候，也不知道特定页面的page cover id，没有办法知道隐藏哪个div，是不是在构造Dialog时把page cover id传入就可以了呢? 这样两个控件不再有依赖关系，也能够通过id查找到page cover DIV了，但是如果用户有的页面需要弹出page cover，有的不需要怎么办？

这是就事件大显身手的时候了，修改一下dialog 对象和openDialog方法

复制代码 
function Dialog(id){
            this.id=id;
            this.close_handler=null;
            var that=this;
            document.getElementById(id).children[0].onclick=function(){
                that.close();
                if(typeof that.close_handler=='function')
                {
                    that.close_handler();
                }
            }
        }
复制代码
复制代码 
function openDialog(){
            var dlg=new Dialog('dlgTest');
            document.getElementById('pageCover').style.display='block';
            
            dlg.close_handler=function(){
                document.getElementById('pageCover').style.display='none';
            }
            dlg.show();
        }
复制代码

在Dialog对象内部添加一个句柄，关闭按钮的click事件处理程序在调用close方法后判断该句柄是否为function，是的话就调用执行该句柄。在openDialog方法中，创建Dialog对象后对句柄赋值为一隐藏page cover方法，这样在关闭Dialog的时候就隐藏了page cover，同时没有造成两个控件之间的耦合。这一交互过程就是一个简单的 定义事件——绑定事件处理程序——触发事件的过程，DOM对象的事件，比如button的click事件也是类似原理。

高级一点的自定义事件

上面举的小例子很简单，远远不及DOM本身事件精细，这种简单的事件处理有很多弊端

1.没有共同性。如果在定义一个控件，还得写一套类似的结构处理

2.事件绑定有排斥性。只能绑定了一个close事件处理程序，绑定新的会覆盖之前绑定

3.封装不够完善。如果用户不知道有个 close_handler的句柄，就没有办法绑定该事件，只能去查源代码

逐个分析一下这几个弊端，弊端一很熟悉，使用过面向对象的同学都可以轻易想到解决方法——继承；对于弊端二则可以提供一个容器（二维数组）来统一管理所有事件；弊端三的解决需要和弊端一结合在自定义的事件管理对象中添加统一接口用于添加/删除/触发事件

复制代码 
function EventTarget(){
            this.handlers={};
        }
        
        EventTarget.prototype={
            constructor:EventTarget,
            addHandler:function(type,handler){
                if(typeof this.handlers[type]=='undefined'){
                    this.handlers[type]=new Array();
                }
                this.handlers[type].push(handler);
            },
            removeHandler:function(type,handler){
                if(this.handlers[type] instanceof Array){
                    var handlers=this.handlers[type];
                    for(var i=0,len=handlers.length;i<len;i++){
                        if(handler[i]==handler){
                            handlers.splice(i,1);
                            break;
                        }
                    }
                }
            },
            trigger:function(event){
                if(!event.target){
                    event.target=this;
                }
                if(this.handlers[event.type] instanceof Array){
                    var handlers=this.handlers[event.type];
                    for(var i=0,len=handlers.length;i<len;i++){
                        handlers[i](event);
                    }
                }
            }
        }
复制代码

addHandler方法用于添加事件处理程序，removeHandler方法用于移除事件处理程序，所有的事件处理程序在属性handlers中统一存储管理。调用trigger方法触发一个事件，该方法接收一个至少包含type属性的对象作为参数，触发的时候会查找handlers属性中对应type的事件处理程序。写段代码测试一下。

复制代码 
function onClose(event){
            alert('message:'+event.message);
        }
        
        var target=new EventTarget();
        target.addHandler('close',onClose);
        
        //浏览器不能帮我们创建事件对象了，自己创建一个
        var event={
            type:'close',
            message:'Page Cover closed!'
        };
        
        target.trigger(event);
复制代码

至此后连个弊端一解决，应用一下继承解决第一个弊端，下面是寄生式组合继承的核心代码，这种继承方式是目前公认的JavaScript最佳继承方式

复制代码 
function extend(subType,superType){
            var prototype=Object(superType.prototype);
            prototype.constructor=subType;
            subType.prototype=prototype;
        }
复制代码

最后写成的版本就是这样的

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            html,body
            {
                height:100%;
                width:100%;
                padding:0;
                margin:0;
            }
        
            .dialog
            {
                position:fixed;
                width:300px;
                height:300px;
                top:50%;
                left:50%;
                margin-top:-200px;
                margin-left:-200px;
                box-shadow:2px 2px 4px #ccc;
                background-color:#f1f1f1;
                z-index:30;
                display:none;
            }
            
            .dialog .title
            {
                font-size:16px;
                font-weight:bold;
                color:#fff;
                padding:4px;
                background-color:#404040;
            }
            
            .dialog .close
            {
                width:20px;
                height:20px;
                margin:3px;
                float:right;
                cursor:pointer;
            }
            
            .pageCover
            {
                width:100%;
                height:100%;
                position:absolute;
                z-index:10;
                background-color:#666;
                opacity:0.5;
                display:none;
            }
        </style>
    </head>
    <body>
    <div id="pageCover" class="pageCover"></div>
    
    <input type="button" value="Dialog Test" onclick="openDialog();"/>
    
    <div id="dlgTest" class="dialog">
        <img class="close" alt="" src="images/close.png">
        <div class="title">Dialog</div>
        <div class="content">
        
        </div>
    </div>
    
    <script type="text/javascript">            
        function EventTarget(){
            this.handlers={};
        }
        
        EventTarget.prototype={
            constructor:EventTarget,
            addHandler:function(type,handler){
                if(typeof this.handlers[type]=='undefined'){
                    this.handlers[type]=new Array();
                }
                this.handlers[type].push(handler);
            },
            removeHandler:function(type,handler){
                if(this.handlers[type] instanceof Array){
                    var handlers=this.handlers[type];
                    for(var i=0,len=handlers.length;i<len;i++){
                        if(handler[i]==handler){
                            handlers.splice(i,1);
                            break;
                        }
                    }
                }
            },
            trigger:function(event){
                if(!event.target){
                    event.target=this;
                }
                if(this.handlers[event.type] instanceof Array){
                    var handlers=this.handlers[event.type];
                    for(var i=0,len=handlers.length;i<len;i++){
                        handlers[i](event);
                    }
                }
            }
        }
        </script>
        
    <script type="text/javascript">
        function extend(subType,superType){
            var prototype=Object(superType.prototype);
            prototype.constructor=subType;
            subType.prototype=prototype;
        }
    </script>
    
    <script type="text/javascript">
        function Dialog(id){
            EventTarget.call(this)
            this.id=id;
            var that=this;
            document.getElementById(id).children[0].onclick=function(){
                that.close();
            }
        }
        
        extend(Dialog,EventTarget);
        
        
        Dialog.prototype.show=function(){
            var dlg=document.getElementById(this.id);
            dlg.style.display='block';
            dlg=null;
        }
        
        Dialog.prototype.close=function(){
            var dlg=document.getElementById(this.id);
            dlg.style.display='none';
            dlg=null;
            this.trigger({type:'close'});
        }
    </script>
    
    <script type="text/javascript">
        function openDialog(){        
            var dlg=new Dialog('dlgTest');
            
            dlg.addHandler('close',function(){
                document.getElementById('pageCover').style.display='none';
            });
            
            document.getElementById('pageCover').style.display='block';
            dlg.show();
        }
    </script>
    </body>
<html>
复制代码

最后

这样解决了几个弊端看起来就完美多了，其实可以把打开Dialog显示page cover也写成类似关闭时事件的方式了。当代码中存在多个部分在特定时刻相互交互的情况下，自定义事件就非常有用了。如果每个对象都有其它对象的引用，那么整个代码高度耦合，对象改动会影响其它对象，维护起来困难重重。自定义事件使对象解耦，功能隔绝，这样对象之间实现了高聚合。


   本文转自魏琼东博客园博客，原文链接：http://www.cnblogs.com/dolphinX/p/3254017.html，如需转载请自行联系原作者


文章标签：
JavaScript
前端开发
关键词：
JavaScript事件
JavaScript自定义事件
橘子红了呐
目录
相关文章
派大鑫的工作室
|
2月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
派大鑫的工作室
39 0
dufadayang
|
4月前
|
JavaScript 前端开发
js事件队列
js事件队列
dufadayang
144 55
Li370234940
|
2月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
Li370234940
41 3
cqtianxin1
|
3月前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
cqtianxin1
36 2
龙大吉
|
25天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用。
龙大吉
38 5
乐多_L
|
4月前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
乐多_L
43 0
dufadayang
|
2月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
dufadayang
50 6
那年春天
|
2月前
|
JavaScript 前端开发
JavaScript 中的自定义事件
【10月更文挑战第1天】
那年春天
40 1
cqtianxin1
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
cqtianxin1
26 5
游客j4mujezz7vm7y
|
3月前
|
监控 JavaScript 前端开发
js事件|2-7
js事件|2-7
游客j4mujezz7vm7y
43 5

热门文章

最新文章

  • 1
    Node.js 中流操作实践
  • 2
    《JavaScript框架设计》——1.4　类型的判定
  • 3
    JavaScript FAQ（六）——字符串
  • 4
    .ts 文件编译成 .js 文件，以及 VSCode 自动编译配置
  • 5
    JavaScript右下角信息提示插件Notyf
  • 6
    【温故而知新-Javascript】使用Web存储
  • 7
    测试驱动javascript开发 -- 3.测试驱动开发过程（上）
  • 8
    前端 时间个性化 插件 jquery.timeago.js
  • 9
    第14章 使用Kotlin开发JavaScript代码 《Kotin 编程思想·实战》
  • 10
    Nightwatch.js – 轻松实现浏览器的自动测试
  • 1
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    54
  • 2
    js设计模式-观察者模式与发布/订阅模式
    69
  • 3
    js设计模式-策略模式与代理模式的应用
    71
  • 4
    深入理解JavaScript中的闭包机制
    60
  • 5
    使用Vue.js构建交互式前端的技术探索
    87
  • 6
    使用Node.js构建实时聊天应用的技术指南
    128
  • 7
    深入理解JavaScript中的事件循环机制
    88
  • 8
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    119
  • 9
    JavaScript 数组方法概览
    38
  • 10
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    66

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • jQuery开发教程
  • Vue.js 入门与实战

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。