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!"]);
}