一、事件侦听和抛发
必须先侦听后抛发
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');