JS 的事件基础事件侦听与抛发

Posted 2021-02-28 要coding不要bug！！！

前言

javascript是一种事件驱动型语言。事件驱动是指JavaScript引擎并不是在看到代码之后就会立即执行，而是会在合适的时间才去执行。这个合适的时间是指当某个事件发生之后（例如一个输入框的内容发生了变化，这就是一个事件）。只有当相应的事件发生了之后，相应的操作才会执行，这就是事件驱动。

事件驱动包含三个关键内容：事件、事主和处理方法。

理解了事件模型，我们就能明白JavaScript中的代码虽然是用于描述怎么操作对象的，但是并不一定要立即操作对象。

事件基础、事件侦听与抛发

js事件分为系统事件和自定义派发事件。

IE8以上支持

• DOM.addEventListener(事件类型，事件回调函数);

  事件侦听方法，仅用于仅用于EventTarget对象,给DOM元素添加一个事件侦听（监听），只能收到对应事件类型的消息，当收到这个消息。就执行事件回调函数。

    //这里click这个消息就是系统消息，clickHandler，就是这个系统消息收到后，执行的事件回调函数。
     document.addEventListener("cilck",clickHandler);
    /**
        事件回调函数
        e 有且仅有一个参数e
        e 是一个事件对象，侦听事件收到的消息时获得的事件对象
    */
    function clickHandler(e){
        console.log(e);
    } 

• EventTarget.dispatchEvent(事件对象);

  抛发事件方法，派发事件，仅用于EventTarget对象

    //这里的“myClick”，就是自定义事件类型，是事件传输的“暗号”。
    document.addEventListener("myClick",myClickHandler);
    
    var evt = new Event("myClick");//创建一个事件对象
    evt.a=10;
    document.dispatchEvent(evt);//向document抛发新建的event事件，抛发事件关键是将新建事件的参数传输出来
    

    function myClickHandler(e){
         console.log(e===evt);//true
         console.log(e.a);//10，接收到了派发事件对象的参数
    }

总结

1. 事件必须先侦听后抛发。
2. 侦听和派发的对象是同一个。
3. 侦听和派发的事件类型完全相同。其实事件类型就是一个任意字符串
4. 系统派发的事件字符串是固定的，自定义派发的事件，字符串可以任意
5. 事件侦听回调函数，不能传参,因此事件回调函数中有且仅有一个参数,这个参数即为事件对象
6. 事件都可以手动派发，手动派发的话，页面加载完后就会执行

案例

对象间数据传递, 打算执行obj2.c 将局部变量5传递给obj1的方法b中
要求：使程序模块的可重用性、移植性大大增强。一个好的内聚模块应当恰好做一件事。
obj1 和 obj2 互相调用，但是不相互影响，删除任意一个函数后，也不会报错。

// 高内聚低耦合
    var obj1={
        a:function(){
           // this  对象的方法中this就是该对象自身,这里this就是obj1
           document.addEventListener("aaa",this.b);
        },
        b:function(e){
           // 传到这里
            console.log(e.s);//5
            }
        }

    var obj2={
        v:10,
        c:function(){
            var s=5;
            var evt=new Event("aaa");
            evt.s=s;
            document.dispatchEvent(evt);
         },
        d:function(){
             //......
        }

    }


        obj1.a();//注册事件
        obj2.c();//创建事件，并且把这个事件抛发出去