Javascript事件派发-dispatchEvent

事件派发的作用:

1.派发数据，将一个封闭模块中的数据传递给另一个封闭模块。
2.事件完成了较为复杂的解耦。

事件和回调函数不同在于:

1、事件可以在任意地方去获取，而回调函数只能在一个地方存在，如果需要完成内容后执行函数，回调函数就只能在一个地方调用，而事件却可以在任何地方接收到数据。
2、回调函数与当前的代码紧密相关联，如果有修改一个地方，可能会造成错误，但是事件机制通过事件的侦听获取，因此不管发送还是接受删除修改后都不会引起任何相关联的错误。

封装的js文件（实现加载图片为例）
回调函数版：

var Method=(function () {
    return {
        loadImage:function (arr,callback) {
            var img=new Image();
            img.arr=arr;
            img.list=[];
            img.num=0;
            img.callback=callback;
            img.addEventListener("load",this.loadHandler);
            img.self=this;
            img.src=arr[img.num];
        },
        loadHandler:function (e) {
            this.list.push(this.cloneNode(false));
            this.num++;
            if(this.num>this.arr.length-1){
                this.removeEventListener("load",this.self.loadHandler);
                
                //全部加载完成后通过回调函数将list返回到html文件
                this.callback(this.list);
                return;
            }
            this.src=this.arr[this.num];
        },
    }
})();

派发事件版：

var Method=(function () {
    return {
        EVENT_ID:"event_id",
        loadImage:function (arr) {
            var img=new Image();
            img.arr=arr;
            img.list=[];
            img.num=0;
//            如果DOM对象下的事件侦听没有被删除掉，将会常驻堆中
//            一旦触发了这个事件需要的条件，就会继续执行事件函数
            img.addEventListener("load",this.loadHandler);
            img.self=this;
            img.src=arr[img.num];
        },

        loadHandler:function (e) {
            this.list.push(this.cloneNode(false));
            this.num++;
            if(this.num>this.arr.length-1){
                this.removeEventListener("load",this.self.loadHandler);
                //事件派发类型必须与事件侦听接收类型一致，这样事件才会收到
                //创建一个事件对象
                var evt=new Event(Method.EVENT_ID)
               //将list作为事件对象的属性
                evt.list=this.list;
                //抛发事件
                document.dispatchEvent(evt);
                return;
            }

            this.src=this.arr[this.num];
        },
    }
})();

  引用方式：

<script>
        var arr=["img/a.jpeg","img/b.jpeg","img/c.jpeg","img/d.jpeg","img/e.jpeg"];
        //此处Method为上面封装的方法
        //将arr图片地址数组放入
        Method.loadImage(arr);
        //给document添加监听事件
        document.addEventListener(Method.EVENT_ID,loadFinishHandler);
        function loadFinishHandler(e) {
        //图片加载完就可以获取到图片list
        console.log(e.list);
    }
    </script>

另一个封装js文件里：

(function () {
    document.addEventListener(Method.EVENT_ID,loadFinishHandler);
    function loadFinishHandler(e) {
    //这里仍然能获取到图片list
        console.log(e.list);
    }
})();

通过使用事件派发机制完成了较为复杂的解耦，代码之间耦合度降低，事件机制通过事件的侦听获取，因此不管发送还是接受，删除修改后都不会引起任何相关联的错误提供了一种将一个封闭模块中的数据传递给另一个封闭模块方法。