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

}