JS學習第二篇；自定義事件並監聽

在js開發過程中，往往ui和js過度的耦合，這種並不是我們想要的結果。

通過事件可以達到解耦合的效果。

第一種方法；

var EventTarget=function(){
         this._listeners={};
     }

EventTarget.prototype={
         constructor:this,
         addEventListener:function(type,fn){
             if (typeof this._listeners[type]==="undefined") {
                 this._listeners[type]=[];
             }
             if (typeof fn==="function") {
                 this._listeners[type].push(fn);
                 this.doEvent(type," jun");此處調用監聽方法
             }
         },
         doEvent:function(type,parameter){
            var arrayEvent=this._listeners[type];
            if (arrayEvent instanceof Array) {
                for (var i = 0,length =arrayEvent.length; i <length ; i++) {
                       if (typeof arrayEvent[i] ==="function") {
                              arrayEvent[i]({parameter:parameter});//此處傳遞參數
                       }
                }
            }
            return this;
         },
         removeEvent:function(type,fn){
            var arrayEvent=this._listeners[type];
            if (typeof type==="string"&&arrayEvent instanceof Array) {
                if (typeof fn==="function") {
                    for (var i =0,length=arrayEvent.length; i <length ; i++) {
                        if (arrayEvent[i]===fn) {
                            this._listeners[type].splice(i,1);
                            break;
                        }
                }
            }else{
                    delete this._listeners[type];
                }
            }
            return this;
         }
     }
     
     var eventTarget=new EventTarget();
     eventTarget.addEventListener("say",function(data){
         alert("hello world"+data.parameter);
     });//添加事件監聽

通過爲"say"添加方法，當fireEvent()執行到"say"方法。會調用添加的function。從而可以取出js中的數據並作用到ui上。

第二種方法

其實dom元素中可以自己加入自定義方法並在合適的時候觸發該方法

$("p").bind("myEvent", function (event, message1, message2) {//第一個參數是事件，第二，三個參數是發送過來的數據。
      alert(message1 + ' ' + message2);

};

$('p').trigger("myEvent", ["Hello","World!"]);//“hello”是第一個數據，"world"是第二個數據

其中myEvent是自己定義的任意事件名稱。只要選擇器選擇的是相同的dom元素，那麼在任何地方都能觸發bind的方法，比如；

function showMsg(event) {  
       $('p').trigger("myEvent", ["Hello","World!"]);
}