zoukankan      html  css  js  c++  java
  • 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);
        }
    })();

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

  • 相关阅读:
    【Android 工具类】经常使用工具类(方法)大全
    driver: Linux设备模型之input子系统具体解释
    ural 1057 Amount of degrees 【数位dp】
    Java8 Lambda表达式教程
    Java线程池
    NodeJS实战——创建基础应用并应用模板引擎
    【网络】代理服务器
    【HTTP】Wireshark过滤规则
    【HTTP】WireShark中获取Content-Encoding: gzip时的响应内容
    【python】判断字符串日期是否有效
  • 原文地址:https://www.cnblogs.com/boonya/p/11165150.html
Copyright © 2011-2022 走看看