派发事件 dispatchEvent

dispatchEvent 向指定目标事件派发一个事件；一般的事件触发是用户进行某些操作时才会触发，而使用dispatchEvent可以在代码中手动触发事件。

定义事件的目的就是为了执行某一方法，手动触发事件的目的也是执行该事件下的方法。

简单的创建并派发事件的例子

    <script type="text/javascript">
        window.onload = function(){
            var btn = document.querySelector('#click');
            btn.addEventListener('click', function(e){  //为元素绑定事件监听
                alert('okk!');
            }, false);
            var event = new Event('click');  //创建一个click事件
            btn.dispatchEvent(event);  //派发事件
        }
    </script>

使用场景

一、触发自定义事件：浏览器自带事件一般由浏览器接收某些操作之后触发，而自定义事件的触发需要使用dispatchEvent来进行手动触发。
二、触发浏览器标准事件：根据需求决定，某些操作如果正好与某个元素事件的触发一致，且该事件很好模拟，就可以触发该事件来达到某些需要的执行结果。

注意事项
ie9以下的版本不支持该方法，所以，有需求的话需要做好浏览器兼容。

使用Jquery来兼容浏览器
Jquery中的trigger方法就是用来触发事件的。

事件派发的作用:

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)
                evt.list=this.list;        //将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.addEventListener(Method.EVENT_ID,loadFinishHandler); //给document添加监听事件
        function loadFinishHandler(e) {
            console.log(e.list);   //图片加载完就可以获取到图片list
       }
</script>

事件监听 addEventListener