博客

事件派发的作用:

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

通过使用事件派发机制完成了较为复杂的解耦，

代码之间耦合度降低，事件机制通过事件的侦听获取，

因此不管发送还是接受，删除修改后都不会引起任何相关联的错误

提供了一种将一个封闭模块中的数据传递给另一个封闭模块方法