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