事件抛发

一、事件侦听和抛发
必须先侦听后抛发

document.addEventListener("自定义事件",anhaoHandler);

// new Event()指创建一个事件对象
var  evt=new Event("自定义事件");
evt.a=10;
// 向document抛发新建的event事件
document.dispatchEvent(evt);

function anhaoHandler(e){
    console.log(e===evt);//打印结果true
    console.log(e.a);//打印结果10
}

作用1：解耦合

// 高耦合
// 烂代码
var obj1={
    a:function(){
        obj2.d(5);
    },
    b:function(sum){
        console.log(sum)
    }
}

var obj2={
    c:function(){
        obj1.b(10);
    },
    d:function(s){
        console.log(s);
    }
}

// 对象间的数据传递
obj1.a();//5
obj2.c();//10

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

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

    }

}

// 打算执行obj2.c 将局部变量5传递给obj1的方法b中

obj1.a();
obj2.c();//打印结果5

二、jQuery中的事件抛发

$(document).on('abc',a,function(e,obj){
      console.log(e,a,obj);
     });
$(document).trigger('abc',{a:1,b:[1,2,3]});

jQuery中没有dipatchEvent方法
trigger抛发事件，类似于dipatchEvent
事件抛发过程中是可以传参的
（原生事件中事件本身是不能有第二个参数的，
但在jq中可以有第二个参数）
如果传参是数组，事件接收函数中从第二位参数向后对应数组的每个元素
如果传参使用的是对象或者其他数据，事件接收函数中只有第二位参数可以接收
不支持事件抛发时多个数据直接传参，也就是说trigger函数只有两个参数，第一个是事件类型，第二个是要传的参数

事件传参有两个
1、事件触发前传参,侦听时传入的参数
2、事件触发时传参，抛发事件时传入的参数

abc();
function abc(){
   var a=1;
  //  这个a就是事件触发前传参
   $(document).on("abc",a,abcHandler);
   $(document).on("click",clickHandler);
}

function abcHandler(e,b,c){
  // console.log(e.data),这个就是事件触发前传参的a
  // console.log(b,c);这个b和c就是抛发事件时传参b和c
  console.log(e.data);
  console.log(b,c);
}

function clickHandler(){
   var b=3;
   var c=5;
  $(document).trigger("abc",[b,c])
}

三、nodejs中的events内置模块

const events = require('events');

// events模块是一个类

class MyEvent extends events {}

let ev = new MyEvent();

ev.on('sayHi', function() { // 监听事件
    console.log('hi');
});

ev.emit('sayHi'); // 用于触发事件

eventEmitter.emit() 方法可以传任意数量的参数到监听器函数。 当监听器函数被调用时， this 关键词会被指向监听器所绑定的 EventEmitter 实例。

const events=require('events');

// console.log(events);//是一个类
class MyEvent extends events{};//继承
let evt=new MyEvent();//实例化对象

evt.on('sayhi',function(a,b){//监听事件
    console.log(a,b,this);
    /* aaa bbb MyEvent {
        _events: [Object: null prototype] { sayhi: [Function] },
        _eventsCount: 1,
        _maxListeners: undefined,
        [Symbol(kCapture)]: false
    } */
});

evt.emit('sayhi','aaa','bbb');