JavaScript自定义事件介绍

很多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>

<inputtype="button" value="Dialog Test" onclick="openDialog();"/>

<divid="dlgTest" class="dialog">
        <imgclass="close" alt="" src="images/close.png">
        <divclass="title">Dialog</div>
        <divclass="content">

</div>
    </div>

<scripttype="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>

<scripttype="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();
        }

效果很不错的样子，灰蒙蒙半透明的罩子在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也写成类似关闭时事件的方式了。当代码中存在多个部分在特定时刻相互交互的情况下，自定义事件就非常有用了。如果每个对象都有其它对象的引用，那么整个代码高度耦合，对象改动会影响其它对象，维护起来困难重重。自定义事件使对象解耦，功能隔绝，这样对象之间实现了高聚合。

赞 (0)

相关推荐

  • js事件模型与自定义事件实例解析

    JavaScript 一个最简单的事件模型,需要有事件绑定与触发,还有事件删除. var eventModel = { list: {}, bind: function () { var args = [].slice.call(arguments), type = args[0], handlers = args.slice(1); if (typeof type === 'string' && handlers.length > 0) { for (var i = 0; i &l

  • Javascript自定义事件详解

    Javascript自定义事件,其本质就是观察者模式(又称订阅/发布模式),它的好处就是将绑定事件和触发事件相互隔离开,并且可以动态的添加.删除事件. 下面通过实例,一步一步构建一个具体的Javascript自定义事件对象. 如:我有一个action1函数,我想每次在执行完action1后,触发另一个函数service1,那么代码我们可以这么写: //服务service1 function service1(){ } //函数action1 function action1(){ //other

  • JavaScript中自定义事件用法分析

    本文实例讲述了JavaScript中自定义事件用法.分享给大家供大家参考.具体分析如下: 在web前端开发中,很多人可能不会用到js的自定义事件,但如果是做一个相对来说比较大的项目,尤其是多人协同开发的时候,自定义事件就显得很重要了.那么,什么是js中的自定义事件呢?我们先来看一个例子: 前端开发员A封装了一个函数: 复制代码 代码如下: function move(){     alert(a);  //以此来代表N行代码 } 过段时间,前端开发员B要在A的基础上丰富这个函数,于是,他会这样写

  • 详解javascript实现自定义事件

    我们平时在操作dom时候经常会用到onclick,onmouseover等一系列浏览器特定行为的事件, 那么自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,在合适的时候需要哪个事件类型,就去调用哪个处理程序 1.js所支持的浏览器默认事件 浏览器特定行为的事件,或者叫系统事件,js默认事件等等都行,大家知道我指的什么就行,下文我叫他js默认事件. js默认事件的事件绑定,事件移出等一系列操作,相信大家都有用到过,如: //DOM0级事件处理程序 var oDiv = docum

  • Nodejs中自定义事件实例

    其实就是继承events的EventEmitter就可以了,然后就可以通过on去注册事件:emit去触发事件,removeListener去移除事件,简单例子如下: var util = require('util'); var Et = require('events').EventEmitter; function Ticker() { var self = this; setInterval(function(){self.emit("tick")},1000); } util.

  • 详解JavaScript中的自定义事件编写

    我们可以自定义事件来实现更灵活的开发,事件用好了可以是一件很强大的工具,基于事件的开发有很多优势(后面介绍). 与自定义事件的函数有 Event.CustomEvent 和 dispatchEvent. 直接自定义事件,使用 Event 构造函数: var event = new Event('build'); // Listen for the event. elem.addEventListener('build', function (e) { ... }, false); // Disp

  • nodejs 中模拟实现 emmiter 自定义事件

    nodejs 中模拟实现 emmiter 自定义事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function Emitter() { this.events = {}; //存放事件的地方 } Emitter.prototype.on = function(type, cb) { var

  • javascript 自定义事件初探

    还有,"通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.".相信C#程序员对事件的好处是深有体会的.好了,Code is cheap.看代码: function class1() { // 最简单的事件设计模式 } class1.prototype = { show: function () { this .onShow(); }, onShow: function () { } } function test() { var obj = new cla

  • js自定义事件及事件交互原理概述(一)

    在JS中事件是JS与浏览器交互的主要途径.事件是一种叫做观察者的设计模式,这是一种创建松散耦合代码的技术.对象可以发布事件,用来表示在该对象生命周期中某个有趣的时刻到了.然后其他对象可以观察该对象,等待这些有趣的时刻到来并通过运行代码来响应. 观察者模式有两类对象组成:主题和观察者.主体负责发布事件,同时观察者通过订阅这些事件来观察该主体.该模式的一个关键概念是主体并不知道观察者的任何事情,也就是说它可以独自存在并正常运作即使观察者不存在.从另一方面说,观察者知道主体并能注册事件的回调函数(事件

  • js自定义事件及事件交互原理概述(二)

    js自定义事件(一)的目的只是让大家简单的理解自定事件是如何模拟出来的,大家不难发现会有很多缺陷,比如: 1.此事件对象只能注册一个事件,不能提供多个事件 2.注册方法没有返回的一些信息 下面我们就来解决这些问题.如下为MyEvent.js源代码: 复制代码 代码如下: function MyEvent(){ this.handlers={}; } MyEvent.prototype={ addHandler:function(type,handler) { if(typeof this.han

  • js自定义事件代码说明

    js自定义事件代码说明

    复制代码 代码如下: <form onreturn="ReturnCallBack();" jstype="vali"> </form> <script type="text/javascript"> var ReturnCallBack = function(){ //CODE return true; } </script> 代码看起来太悬了,怎么好象多了一个onreturn事件... 说说我这

  • js实现屏蔽默认快捷键调用自定义事件示例

    具体如何屏蔽更多的快捷键可以自行google搜索. 这里要说的是如何屏蔽后去执行自定义的事件. 这里为了方便使用的Kibo做例子,使用google搜索出来的结果一般都是javascript原生实现,很简单的,这里不做介绍. 这里是实现了在一个textarea中enter进行保存的例子,屏蔽掉了原来的回车事件. 代码如下: 复制代码 代码如下: //键盘监听 var areaKey = new Kibo($("#aac010")[0]); areaKey.down('enter',doS

  • JavaScript 自定义事件之我见

    事件 技术一般水平有限,有什么错的地方,望大家指正. 事件就是用户和浏览器交互的一种途径.假如一个用户注册的功能,我们在填写完基本信息之后,点击提交按钮就可以实现注册功能,要想完成这个功能所需要的就是点击事件.我们预先定义好操作行为,在用户点击提交按钮时就执行我们预先定好的行为,在本例中我们的代码逻辑一般就是收集用户填写信息,验证信息合法性,利用AJAX与服务器交互. 这个过程就好像我们平时封装函数然后调用函数一样,事件其实也就类似函数定义函数调用这样的一个过程,只不过事件函数的调用是由用户的一

随机推荐