对js中事件监听的理解

2019独角兽企业重金招聘Python工程师标准>>>

事件监听是js中异步编程的一种手段。对监听模式的理解，可以对应到JQuery的事件绑定中的用到的对象上：
被监听对象 -- dom对象
监听对象   -- 回调函数（对象）
事件对象   -- （隐式或显式）传入回调函数的参数e

但是我们使用的时候，他们都是实例化后、直接可以调用的对象了，再深入一点，它们各自的构造器中应该大概会有这样的逻辑(用下面的代码演示)
dom的构造器：

1. 有一个可以绑定回调函数的方法on()
2. 有一个事件发生时会被（自动）调用的方法abc()
3. 还可以有其他与dom属性操作相关或无关的方法anyFunc()

事件对象的构造器：

1. 实例化时能接收被监听对象，并缓存起来
2. 把缓存的被监听对象以公开的属性或方法形式暴露到外部可用

监听对象的构造器：

1. 提供一个可以在事件发生、事件对象实例化后，被调用的方法。
2. 这个方法能接收事件对象传入，并通过事件对象来获取当前被监听对象的信息，然后执行相关操作。

// 事件对象，
//保存了对被监听对象的引用，事件发生时会被实例化后传入到回调方法中，从而在回调方法中获取当前被监听对象的信息
var Event = function(obj) {
	this.obj = obj;
	this.getSource = function() {
		return this.obj;
	}
}

// 监听对象,
//提供回调方法，从传入的事件对象中获取当前被监听的对象的信息
var F2 = function() {
	this.hander = function(event) {
		var f2 = event.getSource();
		console.log("f2 do something!");
		f2.anyFunc();
	}
}

// 被监听对象，
//提供一个可以缓存监听对象的方法，
//在事件发生时会自动执行另一个方法，这个方法的内部逻辑包括：以自身为参数创建事件对象e，执行缓存的监听对象的回调方法，并传入参数：事件对象e。
var F1 = function() {
	this.abc = function() {
		console.log("f1 do something one!");
		// 创建事件对象
		var e = new Event(this);
		// 发布事件
		this.f2.hander(e);
		console.log("f1 do something two!");
	}

	this.on = function(f2) {
		this.f2 = f2;
	}

	this.anyFunc = function() {//这个可以是任意方法，用于执行其他任务
		console.log("f1 anyFunc invoke!");
	}
}

// 主函数
//先实例化监听对象和被监听对象
//用被监听对象提供的on方法，把它们绑定起来
//模拟事件发生，会自动调用被监听对象的abc方法
function main() {
	var f1 = new F1();
	var f2 = new F2();

	// 加入监听
	f1.on(f2);

	// 模拟事件发生
	f1.abc();
}

// 运行主函数测试执行流程
main();

 

转载于:https://my.oschina.net/codespring/blog/738217