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 ...
随机推荐
- Codeforces Round #248 (Div. 2) C. Ryouko's Memory Note
题目链接:http://codeforces.com/contest/433/problem/C 思路:可以想到,要把某一个数字变成他的相邻中的数字的其中一个,这样总和才会减少,于是我们可以把每个数的 ...
- windows OBJECT查找
PspCidTable表里.索引值总之4的倍数.也就是说 PID/4 才是PspCidTable索引.*8 才是PsPCidTable+偏移.获取进程对应的 _HANDLE_TABLE_ENTRY 结 ...
- 即时通讯(IM-instant messager)
即时通讯又叫实时通讯,简单来说就是两个及以上的人使用网络进行文字.文件.语音和视频的交流. 首先,进行网络进行通信,肯定需要网络协议,即时通讯专用的协议就是xmpp.xmpp协议要传递的消息类型是xm ...
- LoadRunner检查点学习实例
LoadRunner只会检测脚本中事务的执行状态,而实际的事务执行结果则需要通过检查点来完成. 例如一个登录事务,LR只关心事务本身的执行状态,也就是说哪怕实际操作密码错误产生登录失败的业务操作,其事 ...
- MPAndroidChart饼图属性及相关设置
公司最近在做统计功能,所以用到了饼图,在网上查了一些资料最终决定使用MPAndroidChart,使用起来非常方便,还有一些问题通过各种查找,终于解决...废话不多说,先看下效果图: 布局文件: &l ...
- [工作中的设计模式]备忘录模式memento
一.模式解析 备忘录对象是一个用来存储另外一个对象内部状态的快照的对象.备忘录模式的用意是在不破坏封装的条件下,将一个对象的状态捕捉(Capture)住,并外部化,存储起来,从而可以在将来合适的时候把 ...
- PHP 使用 OSS 批量上传图片
<?php set_time_limit(0); // 引入自动加载类// 确保路径是否正确 require_once 'autoload.php'; // 确定参数 需要申请 $accessK ...
- js运动框架tween
<!DOCTYPE html> <html> <head> <title>myAnimate</title> <style> * ...
- BSGS[bzoj2242][bzoj3122]
数论题. 操作一:直接快速幂就好了. 操作二:我用了exgcd,shy和lyz都喜欢欧拉函数...QAQ最后这块还写错了. 对于ax+by=gcd(a,b)的形式,我们可以把他们变成y'x+p'y=1 ...
- Spring Boot 集成MyBatis
http://blog.csdn.net/isea533/article/details/50359390