事件的原理以及关于框架的底层原理

事件的基础

一，事件：整个JavaScript 的核心

JavaScript是一个事件驱动性语言，全靠事件驱动来执行函数。
其中包括两大类
1.侦听事件
2.抛发事件
那么如何完成事件的侦听和抛发呢？

        侦听事件
        抛发事件

        所有继承EventTarget类别的都是可以抛发和侦听事件的，
        类似于打电话和接电话，
        事件对象
        var o=new EventTarget();
        侦听事件
        
		我们平时都是用click和clickHandler这种方法直接驱动事件函数的，
		也就是说，部分抛发事件已经是浏览器写好的，但是我们可以自定义抛发
	
		那么他的原理是什么呢
		 o.addEventListener("chilema",chilemaHandler);
		为了检验事件的原理，我随意创建了一个事件名，叫吃了么事件，吃了么Handler；
	
        创建事件对象
        var evt=new Event("chilema");
        evt.a=10;（创建事件对象，这一步就是我们使用事件时省略的那两步骤，这个目的是）
        
        抛发事件，谁侦听，就向谁抛发，抛发的事件类型必须和事件侦听类型完全一样
        o.dispatchEvent(evt);
        然后再创建一个要执行的事件函数；
              function chilemaHandler(e){
            console.log(e.a);
        } 
        这样我们就完成了整个事件的过程。
        这就是框架的原理，抛发事件和监听事件

有时候我们想在一个函数中运行另一个函数

        var obj={
            a:function(){
                obj1.b();
            },
            b:function(){
                console.log("bbb");
            }
        }


        /*var obj1={
            a:function(){
                obj.b();
            },
            b:function(){
                console.log("ccc");
            }
        }*/


        obj.a();
        obj1.a(); 

但是当我的obj1去掉的话，浏览器就会报错（因为没定义必然报错）

这种情况就叫做高耦合

那如何去解耦呢？

这时候就是事件的概念，我先把要运行的函数存到一个中介里，这个中介就是document。

         var obj={
            a:function(){
                document.addEventListener("abc",this.b);
            },
            b:function(e){
                console.log("bbb",e.a);
              
            }
        }

    
        var obj1={
            a:function(){
                document.addEventListener("obj1",this.b);
                var evt=new Event("abc");
                evt.a=10;
               document.dispatchEvent(evt);（抛发事件代码）
            },
            b:function(e){
                console.log("ccc",e.a);
            }
        }
        
        obj.a();
        obj1.a();
        
        这样我们就能拿到这个抛发的事件
        这个就叫做事件抛发的解耦；