观察者模式和js自定义事件

事件是一种叫做观察者的设计模式,观察者模式由两类对象组成:主体和观察者。主体负责发布事件,同时观察者通过订阅这些事件来观察该主体。拿DOM来说,DOM就是主体,事件处理代码便是观察

下面是一个自定义事件,

function EventTarget() {this.handlers = {};
}
EventTarget.prototype = {constructor: EventTarget,addHandler: function (type, handler) {if (typeof this.handlers[type] == 'undefined') {this.handlers[type] = [];}this.handlers[type].push(handler);},fire: function (event) {if (!event.target) {event.target = this;}if (this.handlers[event.type] instanceof Array) {var handlers = this.handlers[event.type];for (var i = 0, len = handlers.length; i < len; i++) {handlers[i](event);}}},removeHandler: function (type, handler) {if (this.handlers[type] instanceof Array) {var handlers = this.handlers[type];for (var i = 0, len = handlers.length; i < len; i++) {if (handlers[i] === handler) {break;}}handlers.splice(i, 1);}}
}
自定义事件的调用,addHandler() 添加事件,fire() 执行事件,removeHandler() 删除绑定的事件。

function handleMessage1(event) {console.log("111--", event.message);
}
function handleMessage2(event) {console.log("222--", event.message);
}
var target = new EventTarget();
// 添加事件
target.addHandler('message', handleMessage1);
target.addHandler('message', handleMessage2);
// 执行事件
target.fire({type: 'message',message: 'hello!'
})// 删除事件
target.removeHandler('message', handleMessage1);
// 执行事件
target.fire({type: 'message',message: 'holy'
})



本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/553613.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows7自带录制屏幕怎么用

现在还有许多用户使用的都是windows7旗舰版系统&#xff0c;有时候在使用时会需要用到屏幕录制。那我们要怎么操作呢?可能对于不是太熟悉电脑的朋友来讲&#xff0c;会比较困难。没关系&#xff0c;下面小编为大家分享的就是windows7自带录制屏幕怎么用的方法介绍啦。 window…

米侠浏览器如何添加脚本 米侠浏览器中添加脚本的具体操作步骤

1、想要在米侠浏览器里添加脚本的话&#xff0c;用户们应该先点击页面下方的横杠按钮&#xff0c;打开功能列表找到“脚本”功能进行设置。 米侠浏览器如何添加脚本 米侠浏览器中添加脚本的具体操作步骤 2、接下来通过脚本的功能弹窗&#xff0c;点击其中的“新增”选项&…

js 排序

冒泡排序 var dataStore [ 72 , 1 , 68 , 95 , 75 , 54 , 58 , 10 , 35 , 6 , 28 , 45 , 69 , 13 , 88 , 99 , 24 , 28 , 30 , 31 , 78 , 2 , 77 , 82 , 72 ];var t bubbleSort(dataStore);console.log(t);function bubbleSort(data) {var temp 0;for (var i 0; i < dat…

优酷视频如何意见反馈?优酷视频怎么意见反馈

01、 我们打开优酷视频APP。 优酷视频如何意见反馈&#xff1f;优酷视频怎么意见反馈 02、 在视频的首页&#xff0c;我们点击下方最右侧的那个“我的”。 优酷视频如何意见反馈&#xff1f;优酷视频怎么意见反馈 03、 我们接着在我的页面&#xff0c;选择下“意见反馈”。…

js 类型判断

说到js的类型判断很容易想到的是 typeof、instanceof等。 typeof 有个缺点就是引用类型的结果值都是object 所以就要说一下这些类型是怎么判断的。在说类型判断之前先介绍个东西 Object.prototype.toString 可以查看链接 翻译过来就是 当 toString 方法被调用的时候&#xf…

win11文件夹怎么放到文件栏

Windows11系统桌面相对于win10系统来看&#xff0c;具有很大的变化&#xff0c;其中关于文件的设置具有很大的改变。其中关于文件的文件栏放置和删除是不少网友们关注的问题&#xff0c;下面一起来看看了解一下吧! win11文件夹怎么放到文件栏 win11文件夹需要权限删除怎么办 …

cordova报错“No installed build tools found. Install the Android build tools version - ”

在cordova 里面添加一个安卓平台后&#xff0c;用android studio打开安装gradle后&#xff0c;然后开始构建项目&#xff0c;这个时候在控制台上会报错 这个时候看到对应的文件下报错信息。 然后我们打开这个文件后&#xff0c; 发现这个 if else 判断走了 else 里面的代码&a…

Win7系统不能录音怎么办

目前Win7系统已经逐渐成为了最常使用的系统之一&#xff0c;但有一些小伙伴在使用Win7系统的过程中却发现录制音频功能无法录音&#xff0c;那么遇到这种问题应该怎么办呢?下面就和小编一起来看看Win7系统不能录音的解救方法吧。 Win7系统不能录音怎么办 1、既然是录音问题那…

Win7系统还原声音图标的方法

任务栏声音图标不见了?这是什么情况?任务栏声音图标不见了是我们经常遇到的问题&#xff0c;那么遇到这种情况我们该怎么办呢?下面小编给大家整理了Win7系统还原声音图标的方法&#xff0c;当你遇到win7任务栏声音图标消失不见时&#xff0c;可参照以下的操作方法进行解决。…

Vim 常用命令总结

vi 命令编辑器有三种模式&#xff1a;命令模式&#xff0c;编辑模式和末行模式。 命令模式&#xff1a;键盘的任意一个键都可以当成“编辑命令”。 编辑模式&#xff1a;键盘的任意一个键都当成“文本内容”。 末行模式&#xff1a;键盘的任意一个键都当成“文本管理命令”。…

Python数据结构与算法(一)--算法和时间复杂度

最近下班一直在学习和总结Python&#xff0c;最近在整理数据结构和算法这方面的知识&#xff0c;虽然大学的时候也学过数据结构(c语言版本)&#xff0c;但是工作这几年一直在做前端所以&#xff0c;这方面的知识也忘了差不多&#xff0c;所以就想整理一下&#xff0c;方便以后自…

via浏览器如何拦截广告

1、用户们需要先在主页的右上角点击横杠选项&#xff0c;打开列表选择“设置”功能。 via浏览器如何拦截广告 Via浏览器屏蔽广告方法介绍 2、而当大家进入设置页面后&#xff0c;就可以从中选择“通用”功能&#xff0c;找到其中的广告拦截功能进行开启。 via浏览器如何拦截…

win7系统出现0x0000001a蓝屏代码的解决教程

当我们在使用win7的时候&#xff0c;遇到了开机时蓝屏卡死并且出现0x0000001a蓝屏代码的情况时&#xff0c;小编觉得这种问题不是驱动除就是系统服务出错&#xff0c;可以尝试在运行中输入Chkdsk /r代码进行修复。或者是通过我们电脑上安装的第三方杀毒软件进行处理。想要了解详…

Python数据结构与算法(二)--timeit模块

Python内置性能分析&#xff0c;timeit模块 timeit模块可以用来测试一小段Python代码的执行速度。 class timeit.Timer(stmtpass, setuppass, timer<timer function>) Timer是测量小段代码执行速度的类。 stmt参数是要测试的代码语句&#xff08;statment&#xff09…

QQ浏览器怎么关闭云加速 QQ浏览器云加速关闭方法

QQ浏览器里面有个功能叫做云加速&#xff0c;这个功能能够让QQ浏览器的性能大幅度提高&#xff0c;但是鱼与熊掌不能兼得&#xff0c;有些网页因为不兼容云加速从而导致页面显示不正常。今天&#xff0c;小编为大家带来了QQ浏览器云加速关闭方法。感兴趣的朋友快来了解一下吧。…

Python数据结构与算法(三)--数据结构的概念

上一章我们看Python内置的模块可以测试代码的时间&#xff0c;有的代码执行时间短有的执行时间长&#xff0c;就是说效率不一样。 如果上面不明显的话&#xff0c;大家看下面两个方法。append() 和 insert(0) import timeit def t6():li []for i in range(10000):li.append(…

Win11开始菜单恢复Win10样式的方法

许多用户夹紧器都已经抢先体验升级了Windows11系统&#xff0c;但是对于一些用户来说&#xff0c;Windows11开始菜单的界面不是非常好用&#xff0c;想要将开始菜单改成Win10的样子。那么我们要怎么调整呢?下面小编就为大家具体讲解一下吧! Win11开始菜单恢复Win10样式的方法…

Python数据结构与算法(四)--顺序表

顺序表 在程序中&#xff0c;经常需要将一组&#xff08;通常是同为某个类型的&#xff09;数据元素作为整体管理和使用&#xff0c;需要创建这种元素组&#xff0c;用变量记录它们&#xff0c;传进传出函数等。一组数据中包含的元素个数可能发生变化&#xff08;可以增加或删…

怎么修改腾讯视频的昵称

1、打开腾讯视频&#xff0c;点击打开个人中心。 如何在腾讯视频下载视频_怎么修改腾讯视频的昵称 2、然后此时选择箭头指向位置&#xff0c;打开头像。 如何在腾讯视频下载视频_怎么修改腾讯视频的昵称 3、此时点击上方的编辑个人资料&#xff0c;进入其中。 如何在腾讯视…

Python数据结构与算法(五)--链表

链表 链表的定义: 链表&#xff08;Linked list&#xff09;是一种常见的基础数据结构&#xff0c;是一种线性表&#xff0c;但是不像顺序表一样连续存储数据&#xff0c;而是在每一个节点&#xff08;数据存储单元&#xff09;里存放下一个节点的位置信息&#xff08;即地址…