JavaScript自定義事件介紹

更新時(shí)間：2013年08月29日 12:52:32 作者：

很多DOM對(duì)象都有原生的事件支持，向div就有click、mouseover等事件，事件機(jī)制可以為類的設(shè)計(jì)帶來很大的靈活性，相信.net程序員深有體會(huì)。隨著web技術(shù)發(fā)展，使用JavaScript自定義對(duì)象愈發(fā)頻繁，讓自己創(chuàng)建的對(duì)象也有事件機(jī)制，通過事件對(duì)外通信，能夠極大提高開發(fā)效率

簡單的事件需求

事件并不是可有可無，在某些需求下是必需的。以一個(gè)很簡單的需求為例，在web開發(fā)中Dialog很常見，每個(gè)Dialog都有一個(gè)關(guān)閉按鈕，按鈕對(duì)應(yīng)Dialog的關(guān)閉方法，代碼看起來大概是這樣

復(fù)制代碼代碼如下:

<!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>

這樣在點(diǎn)擊button的時(shí)候就可以彈出Dialog，點(diǎn)擊關(guān)閉按鈕的時(shí)候隱藏Dialog，看起來不錯(cuò)實(shí)現(xiàn)了需求，但總感覺缺點(diǎn)兒什么，一般Dialog顯示的時(shí)候頁面還會(huì)彈出一層灰蒙蒙半透明的罩子，阻止頁面其它地方的點(diǎn)擊，Dialog隱藏的時(shí)候罩子去掉，頁面又能夠操作。加些代碼添個(gè)罩子。

在body頂部添加一個(gè)pagecover

為其添加style

復(fù)制代碼代碼如下:

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

為了打開的時(shí)候顯示page cover，需要修改openDialog方法

復(fù)制代碼代碼如下:

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

效果很不錯(cuò)的樣子，灰蒙蒙半透明的罩子在Dialog彈出后遮蓋住了頁面上的按鈕，Dialog在其之上，這時(shí)候問題來了，關(guān)閉Dialog的時(shí)候page cover仍在，沒有代碼其隱藏它，看看打開的時(shí)候怎么顯示的page cover，關(guān)閉的時(shí)候怎么隱藏行了! 還真不行，打開的代碼是頁面button按鈕的事件處理程序自己定義的，在里面添加顯示page cover的方法合情合理，但是關(guān)閉Dialog的方法是Dialog控件（雖然很簡陋，遠(yuǎn)遠(yuǎn)算不上是控件）自己的邏輯，和頁面無關(guān)，那修改Dialog的close方法可以嗎？也不行！有兩個(gè)原因，首先Dialog在定義的時(shí)候并不知道page cover的存在，這兩個(gè)控件之間沒有什么耦合關(guān)系，如果把隱藏page cover邏輯寫在Dialog的close方法內(nèi)，那么dialog是依賴于page cover的，也就是說頁面上如果沒有page cover，dialog就會(huì)出錯(cuò)。而且Dialog在定義的時(shí)候，也不知道特定頁面的page cover id，沒有辦法知道隱藏哪個(gè)div，是不是在構(gòu)造Dialog時(shí)把page cover id傳入就可以了呢? 這樣兩個(gè)控件不再有依賴關(guān)系，也能夠通過id查找到page cover DIV了，但是如果用戶有的頁面需要彈出page cover，有的不需要怎么辦？

這是就事件大顯身手的時(shí)候了，修改一下dialog 對(duì)象和openDialog方法

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

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對(duì)象內(nèi)部添加一個(gè)句柄，關(guān)閉按鈕的click事件處理程序在調(diào)用close方法后判斷該句柄是否為function，是的話就調(diào)用執(zhí)行該句柄。在openDialog方法中，創(chuàng)建Dialog對(duì)象后對(duì)句柄賦值為一隱藏page cover方法，這樣在關(guān)閉Dialog的時(shí)候就隱藏了page cover，同時(shí)沒有造成兩個(gè)控件之間的耦合。這一交互過程就是一個(gè)簡單的定義事件——綁定事件處理程序——觸發(fā)事件的過程，DOM對(duì)象的事件，比如button的click事件也是類似原理。

高級(jí)一點(diǎn)的自定義事件

上面舉的小例子很簡單，遠(yuǎn)遠(yuǎn)不及DOM本身事件精細(xì)，這種簡單的事件處理有很多弊端

1.沒有共同性。如果在定義一個(gè)控件，還得寫一套類似的結(jié)構(gòu)處理

2.事件綁定有排斥性。只能綁定了一個(gè)close事件處理程序，綁定新的會(huì)覆蓋之前綁定

3.封裝不夠完善。如果用戶不知道有個(gè) close_handler的句柄，就沒有辦法綁定該事件，只能去查源代碼

逐個(gè)分析一下這幾個(gè)弊端，弊端一很熟悉，使用過面向?qū)ο蟮耐瑢W(xué)都可以輕易想到解決方法——繼承；對(duì)于弊端二則可以提供一個(gè)容器（二維數(shù)組）來統(tǒng)一管理所有事件；弊端三的解決需要和弊端一結(jié)合在自定義的事件管理對(duì)象中添加統(tǒng)一接口用于添加/刪除/觸發(fā)事件

復(fù)制代碼代碼如下:

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中統(tǒng)一存儲(chǔ)管理。調(diào)用trigger方法觸發(fā)一個(gè)事件，該方法接收一個(gè)至少包含type屬性的對(duì)象作為參數(shù)，觸發(fā)的時(shí)候會(huì)查找handlers屬性中對(duì)應(yīng)type的事件處理程序。寫段代碼測(cè)試一下。

復(fù)制代碼代碼如下:

function onClose(event){
            alert('message:'+event.message);
        }

        var target=new EventTarget();
        target.addHandler('close',onClose);

        //瀏覽器不能幫我們創(chuàng)建事件對(duì)象了，自己創(chuàng)建一個(gè)
        var event={
            type:'close',
            message:'Page Cover closed!'
        };

        target.trigger(event);

至此后連個(gè)弊端一解決，應(yīng)用一下繼承解決第一個(gè)弊端，下面是寄生式組合繼承的核心代碼，這種繼承方式是目前公認(rèn)的JavaScript最佳繼承方式

復(fù)制代碼代碼如下:

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

最后寫成的版本就是這樣的

復(fù)制代碼代碼如下:

<!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>

最后

這樣解決了幾個(gè)弊端看起來就完美多了，其實(shí)可以把打開Dialog顯示page cover也寫成類似關(guān)閉時(shí)事件的方式了。當(dāng)代碼中存在多個(gè)部分在特定時(shí)刻相互交互的情況下，自定義事件就非常有用了。如果每個(gè)對(duì)象都有其它對(duì)象的引用，那么整個(gè)代碼高度耦合，對(duì)象改動(dòng)會(huì)影響其它對(duì)象，維護(hù)起來困難重重。自定義事件使對(duì)象解耦，功能隔絕，這樣對(duì)象之間實(shí)現(xiàn)了高聚合。

您可能感興趣的文章: