JS的自定义事件(观察者模式)
1 var Event = { 2 on: function (eventName, callback) { 3 console.log("eventName:"+eventName) 4 if (!this.handles) { 5 Object.defineProperty(this, "handles", { 6 value: {}, 7 enumerable: false//不可枚举 8 }) 9 //this.handles = {};//可以枚举 10 } 11 if (!this.handles[eventName]) { 12 this.handles[eventName] = []; 13 } 14 this.handles[eventName].push(callback); 15 }, 16 emit: function () { 17 var hlist = this.handles[arguments[0]] || []; 18 for (var i = 0; i < hlist.length; i++) { 19 this.handles[arguments[0]][i](arguments[1]); 20 } 21 } 22 } 23 Event.on("dome", function (params) { 24 console.log(params); 25 }); 26 Event.on("dome", function (params) { 27 console.log("dome log"); 28 }); 29 Event.emit("dome", "holle world"); 30 31 var person1 = {}; 32 var person2 = {}; 33 //Object.assign是浅复制,会导致person1,person2共用同一个handles 34 Object.assign(person1, Event); 35 Object.assign(person2, Event); 36 person1.on('call1', function () { 37 console.log('person1'); 38 }); 39 person2.on('call2', function () { 40 console.log('person2'); 41 }); 42 person1.emit('call1'); // 输出 'person1' 43 person1.emit('call2'); // 没有输出 44 person2.emit('call1'); // 没有输出 45 person2.emit('call2'); // 输出 'person2'
转载于:https://www.cnblogs.com/cn2758/p/8079043.html
JS的自定义事件(观察者模式)相关推荐
- html 自定义js,js 自定义事件
js怎么自定义事件,并能让用on事件监听 你这个问题全部内容应该是如下吧: 在视频播放的时候,能够用on监听事件的触发,如下: player.on('pause',function(){ consol ...
- Vue组件及自定义事件
目录 Vue.js 组件 动态 Prop Prop 验证 Vue.js 组件 - 自定义事件 data 必须是一个函数
- 观察者模式和js自定义事件
事件是一种叫做观察者的设计模式,观察者模式由两类对象组成:主体和观察者.主体负责发布事件,同时观察者通过订阅这些事件来观察该主体.拿DOM来说,DOM就是主体,事件处理代码便是观察者. 下面是一个自定 ...
- JS基础-事件模型(事件事件流自定义事件事件冒泡/代理)
文章目录 一.事件与事件流 二.事件模型 1.DOM0级模型 2.IE事件模型 3.DOM2级模型 4.DOM3级事件处理方式 三.事件对象 四.事件绑定与解除 1.事件绑定 1.1对象.on事件名字 ...
- 【JS】512- JS 自定义事件如此简单!
在前端开发世界中,JavaScript 和 HTML 之间往往通过 事件 来实现交互.其中多数为内置事件,本文主要介绍 JS自定义事件概念和实现方式,并结合案例详细分析自定义事件的原理.功能.应用及注 ...
- 使用 JS 关闭警告框及监听自定义事件(amaze ui)
使用 JS 关闭警告框及监听自定义事件(amaze ui) 一.总结 1.jquery匿名函数:第8行,jquery匿名函数,$(function(){});,有没有很简单,只是少了jquery的前面 ...
- html 自动触发 事件,js自动触发事件自定义事件
在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click(), form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件 ...
- vue中 点击事件的写法_vue中的事件:原生事件与自定义事件__Vue.js
模板编译 processAttrs 对于ast attributes处理(v-on/@) 利用onRE与dirRE来捕获事件 这里最重要的就是dynamic的判断,vue中可以用动态参数来命名事件名称 ...
- Node.js: 如何继承 events 自定义事件及触发函数
events 是node.js的核心api ,几乎大部分node.js 的api都继承 events 类(javascript中没有类,也不存在继承,确切说是模拟类和继承,点击查看) 比如我们常见的 ...
最新文章
- pytorch 自定义参数不更新
- PAT甲级1017 Queueing at Bank:[C++题解]字符串、结构体、最小堆
- Linux工作笔记-Linux常用命令(一)
- github推荐好玩项目
- 三天打鱼两天晒网 (15 分)
- MUI框架开发HTML5手机APP
- [转]McAfee 病毒库最新离线升级包下载 VirusScan SuperDAT
- Win 10提升隐藏性能
- 【数据结构--二叉树】--附超详细图解
- 新浪微博的Tab滑动效果
- win10,在proe/creo中鼠标中键不能放大缩小
- 关于Bootstrap 中使用Tooltips不生效的问题
- If python is on the left-most side of the chain, that‘s the version you‘ve asked for.
- Android锁屏的实现与难点总结
- flatten(扁平化)数组
- 英语六级(包含作文)
- yarn : 无法加载文件 C:\Users\HYGK\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsof
- Hibernate学习-14:实体之间的关系及其配置,级联操作
- 目标检测——RCNN与YOLO系列
- 计算机软件过期黑屏怎么办,Adobe flashplayer过期怎么办
热门文章
- mysql 索引 lt =,当同时使用gt; =和lt; =时如何索引MySQL表?
- tornado服务器动态文件,tornado 实现服务器消息推送功能
- python def函数报错详解_Python函数详解
- python对数据进行分类_在Python中对一系列数据进行分类的最佳方法
- arggis怎么修改上下标_京东自营是怎么操作的?有什么要求?
- Linux目录遍历实现,列出目录下文件,可使用部分参数
- 【IT笔试面试题整理】数组中出现次数超过一半的数字
- verilog 不可综合语句 总结 汇总(Z)
- C++笔记——指向常量的指针/指针常量
- 爬虫goodreads数据_使用Python从Goodreads数据中预测好书