javascript 自定义事件 发布-订阅 模式 Event
* javascript自定义事件
var myEvent = document.createEvent("Event");
myEvent.initEvent("myEventName", true, true);
var element = document.createElement("div");
element.addEventListener("myEventName", function(evt) {
console.log(evt);
// handle event
});
element.dispatchEvent(myEvent);
output:
Event {isTrusted: false, type: "myEventName", target: div, currentTarget: div, eventPhase: 2, …}
@Ref:
// Function synopsis
event.initEvent(eventType,canBubble,cancelable)
Usage:
function trigger(dom, event) {
var myEvent = document.createEvent('Event')
myEvent.initEvent(event, true, true);
dom.dispatchEvent(myEvent);
}
trigger(tab, "mouseover");
* 发布-订阅 模式
var salesOffices = {
clientList: [],
listen:function(fn) {
this.clientList.push(fn);
},
trigger: function() {
for (var i = 0, fn; fn = this.clientList[i]; i++) {
fn.apply(this, arguments);
}
return this;
}
};
// test
salesOffices.listen(function(price, squareMeter) {
console.log("price="+price);
console.log("squareMeter=" + squareMeter);
});
salesOffices.trigger(2000000,88).trigger(3000000,110);
javascript 自定义事件 发布-订阅 模式 Event的更多相关文章
- Javascript中理解发布--订阅模式
Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 如何实现发布--订阅模式? 发布---订阅模式的代码封装 如何取消订阅事件? 全局--发布订阅对象代码封装 理解模块间通信 回到 ...
- [转] Javascript中理解发布--订阅模式
发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 现实生活中的发布- ...
- 【转】Javascript中理解发布--订阅模式
Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时 ...
- javascript中的发布订阅模式与观察者模式
这里了解一下JavaScript中的发布订阅模式和观察者模式,观察者模式是24种基础设计模式之一. 设计模式的背景 设计模式并非是软件开发的专业术语,实际上设计模式最早诞生于建筑学. 设计模式的定义是 ...
- [转] JavaScript设计模式之发布-订阅模式(观察者模式)-Part1
<JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
- JavaScript设计模式(发布订阅模式)
发布—订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在JavaScript开发中,我们一般用事件模型来替代传统的发布—订阅模式 ...
- Javascript设计模式之发布-订阅模式
简介 发布-订阅模式又叫做观察者模式,他定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖他的对象都会得到通知. 回忆曾经 作为一名前端开发人员,给DOM节点绑定事件可是再频繁不过 ...
- JavaScript设计模式_05_发布订阅模式
发布-订阅模式,定义了对象间的一种一对多的依赖关系,当一个对象的状态发生变化时,所有依赖它的对象都将得到通知.发布-订阅模式是使用比较广泛的一种模式,尤其是在异步编程中. /* * pre:发布-订阅 ...
- javaScript设计模式:发布订阅模式
发布订阅模式的思想是在观察者模式的基础上演变而来,在观察者模式中客户端监听到对象某个行为就触发对应任务程序.而在发布订阅模式中依然基于这个核心思想,所以有时候也会将两者认为是同一种设计模式.它们的不同 ...
随机推荐
- MySQL 条件查询
查询条件 having having的功能和where一样,都是用来筛选查询,不同的是,where在分组之前用,having必须在分组之后使用. # 查询每个部门大于30岁的平均工资,并且保留平均工资 ...
- NOIP 模拟 $32\; \rm Smooth$
题解 \(by\;zj\varphi\) 很简单的贪心题. 开 \(B\) 个队列,每个队列存最后一次乘上的数为当前队列编号的数. 每次去所有队列中队首的最小值,不用开堆,因为开堆用于将所有数排序,但 ...
- ubunt中,使用命令su命令切换root账户,提示认证失败
报错截图: 解决方法: sudo passwd 重新设置root账户的密码,确认root账户的密码(再次输入密码),然后su ,输入root账户刚刚设置的密码即可切入到root账户:
- Docker创建Docker-Registry客户端docker-registry-frontend
docker-compose.yml version: '3.1' services: frontend: image: konradkleine/docker-registry-frontend:v ...
- 是的你没看错,HTTP3来了
目录 简介 HTTP成长介绍 不同HTTP协议解决的问题 HTTP3和QUIC TLS1.3 解决HoL阻塞 连接的迁移 总结 简介 很多小伙伴可能还沉浸在HTTP1.1的世界无法自拔,但是时代的洪流 ...
- C#中IEumerable的简单了解
参考网址:https://blog.csdn.net/qq_39806817/article/details/115024666 一.IEnumerable简单介绍IEnumerable是可枚举类型, ...
- wpf 中 theme 的使用 和 listview 模板的使用.
theme 文件 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentatio ...
- Html 之自动高度 auto 和 100%高度
HTML 高度 下面示例 设置为 Auto 和 100% <!DOCTYPE html> <html lang="en"> <head> < ...
- CompletionService简介、原理以及小案例
博客1:http://www.oschina.net/question/12_11255 博客2: CompletionService简介 CompletionService与ExecutorServ ...
- Go: 复合数据类型slice
slice slice 表示用于相同类型元素的可变长度的序列. slice有三个属性:指针.长度和容量. 指针:slice存储数据的内部结构是数组,指针指向的是数组的地址 长度:保存slice中的元素 ...