js实现事件模型bind与trigger
function Emitter() {
this._listener = [];//_listener[自定义的事件名] = [所用执行的匿名函数1, 所用执行的匿名函数2]
}
//注册事件
Emitter.prototype.bind = function(eventName, callback) {
var listener = this._listener[eventName] || [];//this._listener[eventName]没有值则将listener定义为[](数组)。
listener.push(callback);
this._listener[eventName] = listener;
}
//触发事件
Emitter.prototype.trigger = function(eventName) {
var args = Array.prototype.slice.apply(arguments).slice(1);//atgs为获得除了eventName后面的参数(注册事件的参数)
var listener = this._listener[eventName];
if(!Array.isArray(listener)) return;//自定义事件名不存在
listener.forEach(function(callback) {
try {
callback.apply(this, args);
}catch(e) {
console.error(e);
}
})
}
//实例
var emitter = new Emitter();
emitter.bind("myevent", function(arg1, arg2) {
console.log(arg1, arg2);
});
emitter.bind("myevent", function(arg1, arg2) {
console.log(arg2, arg1);
});
emitter.trigger('myevent', "a", "b");
实现链式调用的例子,原理与事件模型相同
function LazyMan(name) {
return new _LazyMan(name);
}
function _LazyMan(name) {
console.log("Hi This is " + name)
this.task = [];
var _this = this;
var namer = (function(name) {
return function() {
console.log(name);
_this.next();
}
})(name)
this.task.push(namer);
setTimeout(function() {
_this.next();
}, 0);
return this;
}
_LazyMan.prototype.next = function() {
var fn = this.task.shift();
fn&&fn();
}
_LazyMan.prototype.eat = function(val) {
var _this = this;
var eat = (function(val) {
return function() {
console.log("eat" + val);
_this.next();
}
})(val);
this.task.push(eat);
return this;
}
_LazyMan.prototype.sleep = function(time) {
var _this = this;
var timer = (function(time) {
return function() {
setTimeout(function() {
console.log("wait");
console.log("time=" + time);
_this.next();
}, time*1000);
}
})(time);
this.task.push(timer);
return this;
}
//LazyMan("Hank").eat("dinner").eat("supper");
LazyMan("Hank").sleep(3).eat("dinner");
js实现事件模型bind与trigger的更多相关文章
- JS的事件模型
之前对事件模型还是比较清楚的,许多概念都清晰映射在脑海中.工作之后,一方面使用的局限性,二是习惯于用框架中的各种事件监听方式,简单即方便,久而久之,事件的一些概念开始淡出记忆中,就像我现在已经开始淡忘 ...
- js二级事件模型的处理细节
一.纠正网络上的一个误传--“IE不支持事件捕获” 可以在浏览器中运行上面demo,在各主流浏览器中,鼠标移上都可以分别触发捕获与冒泡事件的监听函数,所以IE也是支持事件捕获的,连IE6都支持,只是在 ...
- js 事件模型详解
把js的事件模型,分为两类,DOM0级和DOM2级, DOM0级 通常直接在DOM对象上绑定函数对象,指定事件类型,dom.onClick = function(){};类似于这种写法,移除事件,则直 ...
- js的事件学习笔记
目录 0.参考 1.事件流 冒泡传播 事件捕获 2.事件绑定--onclick接口 onclick类的接口,只能注册一个同类事件 onclick类的接口,使用button.onclick = null ...
- js事件模型与自定义事件
JavaScript 一个最简单的事件模型,需要有事件绑定与触发,还有事件删除. var eventModel = { list: {}, bind: function () { var args = ...
- JS事件模型小结
三种事件模型:原始事件模型(DOM0),DOM2事件模型,IE事件模型: 不同点: 事件程序的注册(给HTML元素所对应的JS对象绑定事件) 事件传播的过程 事件模型的注册: 一.原始事件模型(没有兼 ...
- JS的事件绑定、事件流模型
.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick ...
- javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- 深入理解JS的事件绑定、事件流模型
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresi ...
随机推荐
- T-SQL 基础编程
Ø Go批处理语句 用于同时执行多个语句 Ø 使用.切换数据库 use master go Ø 创建.删除数据库 方法1. --判断是否存在该数据库,存在就删除 if (exists (select ...
- java测试时常见的一些错误
1.解决警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' http://blo ...
- UVA 12232 Exclusive-OR(并查集+思想)
题意:给你n个数,接着三种操作: I p v :告诉你 Xp = v I p q v :告诉你 Xp ^ Xq = v Q k p1 p2 … pk:问你k个数连续异或的结果 注意前两类操作可能会出现 ...
- BroadCast,BroadCastReceiver
效果是:一个MainActivity动态注册一个BroadcastReceiver,BActivity发送一个标准广播,MainActivity接收到广播后,将广播中的消息显示在MainActivit ...
- css精灵动画
精灵动画的实现 CSS Sprites在国内很多人叫CSS精灵,其实这个技术不新鲜,原理就是:靠不断的切换图片让人感觉视觉上不断在变化,例如gif动画之类的效果 那么前端如何实现精灵效果? 传统的就是 ...
- winform里怎样在一个按钮上实现“单击”和“双击”事件?
Button按钮是没有双击事件(DoubleClick)的. button1.DoubleClick+=new EventHandler(button1_DoubleClick);使用这种方法在双击的 ...
- 你必须知道的.NET之特性和属性(转)
1. 引言 attribute是.NET框架引入的有一技术亮点,因此我们有必要花点时间走进一个发现attribute登堂入室的入口.因为.NET Framework中使用了大量的定制特性来完成代码约定 ...
- Uva 679 Dropping Balls
这道题如果模拟着来写,思路很简单 #include <iostream> #include <cstring> using namespace std; int T,D,I,c ...
- Delphi 包的设计思想及它与PAS、BPL、DCU、DLL、OXC的关系。
DCP ,BPL分别是什么文件,起什么作用?你在DELPHI中建立一个package然后保存一下,看看. bpl和Dll比较相似.只是BPL是BORLAND自己弄出来的东西!!!调用也和调用DLL相似 ...
- linux(centos6)搭建ftp服务器
前提 ssh服务已经开启,关闭防火墙,主机和虚拟机能ping通 查看ssh和防火墙的状态 service sshd status service iptables status 开启ssh服务 ser ...