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 ...
随机推荐
- Java学习笔记(十)——多态
一.多态 1.对象的多种形态 (1)引用多态: 父类的引用可以指向本类的对象 父类的引用可以指向子类的对象 (2)方法多态: 创建本类对象时,调用的方法为本类方法: 创建子类对象时,调用的方法是子类方 ...
- Git的安装与使用
1,下载git https://code.google.com/p/msysgit/downloads/list 2,安装git ,我们选择命令行形式,这样无论在window下还是在linux下 都可 ...
- Oracle常用命令
查看数据库锁的情况 SELECT object_name, machine, s.sid, s.serial# FROM gv$locked_object l, dba_objects o, gv$ ...
- Javascript参考手册
---------------------------------------------------------------------------------------------------- ...
- AFNetworking 之于 https 认证
写在开头: 本来这篇内容准备写在AFNetworking到底做了什么?(三)中的,但是因为我想在三中完结这个系列,碍于篇幅所限.并且这一块内容独立性比较强,所以单独拎出来,写成一篇. 本文从源码的角度 ...
- ajax 异步交互
<script> $(function(){ $("#sub").click(function () { $.ajax( ...
- Python基础4- 字符串
Python字符串是由数字.字母.下划线组成的一串字符,我们可以使用引号来创建字符串.如:str = 'Helloworld'在Python中没有char类型,单个字符也作为string使用; Pyt ...
- javaScript封装的各种写法
在javascript的世界里,写法是个神奇的现象,真是百家齐开放啊!每次看到老外写的js组件,思想和写法都怪异,就没看到一个js结构基本相同的代码出来.今天,我就来谈谈js写法,我在开发过程中,也写 ...
- CF460 A. Vasya and Socks
A. Vasya and Socks time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- ubuntu server下建立分区表/分区/格式化/自动挂载(转)
link:http://www.thxopen.com/linux/2014/03/30/Linux_parted.html 流程为:新建分区-->格式化分区-->挂载分区 首先弄明白分区 ...