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的更多相关文章

  1. JS的事件模型

    之前对事件模型还是比较清楚的,许多概念都清晰映射在脑海中.工作之后,一方面使用的局限性,二是习惯于用框架中的各种事件监听方式,简单即方便,久而久之,事件的一些概念开始淡出记忆中,就像我现在已经开始淡忘 ...

  2. js二级事件模型的处理细节

    一.纠正网络上的一个误传--“IE不支持事件捕获” 可以在浏览器中运行上面demo,在各主流浏览器中,鼠标移上都可以分别触发捕获与冒泡事件的监听函数,所以IE也是支持事件捕获的,连IE6都支持,只是在 ...

  3. js 事件模型详解

    把js的事件模型,分为两类,DOM0级和DOM2级, DOM0级 通常直接在DOM对象上绑定函数对象,指定事件类型,dom.onClick = function(){};类似于这种写法,移除事件,则直 ...

  4. js的事件学习笔记

    目录 0.参考 1.事件流 冒泡传播 事件捕获 2.事件绑定--onclick接口 onclick类的接口,只能注册一个同类事件 onclick类的接口,使用button.onclick = null ...

  5. js事件模型与自定义事件

    JavaScript 一个最简单的事件模型,需要有事件绑定与触发,还有事件删除. var eventModel = { list: {}, bind: function () { var args = ...

  6. JS事件模型小结

    三种事件模型:原始事件模型(DOM0),DOM2事件模型,IE事件模型: 不同点: 事件程序的注册(给HTML元素所对应的JS对象绑定事件) 事件传播的过程 事件模型的注册: 一.原始事件模型(没有兼 ...

  7. JS的事件绑定、事件流模型

    .t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick ...

  8. javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  9. 深入理解JS的事件绑定、事件流模型

     一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresi ...

随机推荐

  1. 10个很棒的学习Android 开发的网站(转)

    看到江湖旅人 写的<10个很棒的学习iOS开发的网站 - 简书>,所以就忍不住写Android 啦,也希望对大家有帮助.我推荐的网站,都是我在学习Android 开发过程中发现的好网站,给 ...

  2. 智能车学习(三)—— ADC学习

    一.代码分享: 1.ADC头文件 #ifndef ADC_H_ #define ADC_H_ #include "common.h" typedef enum { // ----- ...

  3. this和super

    1.this * 每个类的每个非静态方法(没有被static修饰)都会隐含一个this引用名称,它指向调用这个方法的对象. * 当在方法中使用本类的属性时,都会隐含地使用this名称,当然也可以明确指 ...

  4. 廖雪峰js教程笔记4 sort排序的一些坑

    排序算法 排序也是在程序中经常用到的算法.无论使用冒泡排序还是快速排序,排序的核心是比较两个元素的大小.如果是数字,我们可以直接比较,但如果是字符串或者两个对象呢?直接比较数学上的大小是没有意义的,因 ...

  5. c++ 服务端 客户端

    转载自:http://blog.csdn.net/orange_xxx/article/details/7276868 ,谢谢原作者. 作为个人学习的笔记使用. 服务端: // Server.cpp ...

  6. Excel: Switch (transpose) columns and rows

    链接:https://support.office.com/en-in/article/Switch-transpose-columns-and-rows-ed1215f5-59af-47e6-953 ...

  7. [R]R下as.Date()函数的坑

    问题描述: 在本地使用as.Date()函数从POSIXct类型中提取date时,出现了日期不一致的错误.导致处理数据时,总是出问题. 还好被领导发现数据有误,不然这个bug不知道还要潜伏多久.尽管如 ...

  8. Java 集合系列08之 List总结(LinkedList, ArrayList等使用场景和性能分析)

    概要 前面,我们学完了List的全部内容(ArrayList, LinkedList, Vector, Stack). Java 集合系列03之 ArrayList详细介绍(源码解析)和使用示例 Ja ...

  9. 20145308刘昊阳 《Java程序设计》实验一 Java开发环境的熟悉 实验报告

    20145308刘昊阳 <Java程序设计>实验一报告 实验名称 Java开发环境的熟悉 实验内容 使用JDK编译.运行简单的Java程序 2.使用Eclipse 编辑.编译.运行.调试J ...

  10. cdoj 1334 郭大侠与Rabi-Ribi Label:贪心+数据结构

    郭大侠与Rabi-Ribi Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) 最近 ...