自定义事件 原
时间:2022-06-19
本文章向大家介绍自定义事件
原,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
事件是一种叫做观察者的设计模式,这是一种创建松散耦合的技术。观察者模式由两类对象组成:主体和观察者。主体负责发布事件。同时观察者通过订阅这些事件来观察该主体。该模式的一个关键概念是主体并不知道观察者的任何事情,也就是说它可以独自存在并正常运作即使观察者不存在。从另一方面来说。观察者知道主体并能注册事件的回调函数(事件处理程序),涉及到Dom上时,Dom元素便是主体,你的事件处理代码便是观察者。
事件是与Dom交互的最常见的方式,但它们也可以用于非Dom代码中--通过实现自定义事件。
自定义事件背后的概念是创建一个管理事件的对象。让其他对象监听那些事件。实现此功能的基本模式可以定义如下:
function EventTarget(name1) {
this.name = name1;
this.handlers = {}
}
EventTarget.prototype = {
constructor: EventTarget,
addHandler: function(type, handler) {
console.log(type);
//刚开始只有type并没有为this.handlers[type]赋值
if (typeof this.handlers[type] == "undefined") {
this.handlers[type] = [];
console.log("hi")
}
//接着执行push
this.handlers[type].push(handler);
console.log(this.handlers[type]);
},
fire: function(event) {
if (!event.target) {
event.target = this;
console.log("not have eventTarget")
}
if (this.handlers[event.type] instanceof Array) {
console.log("isArray")
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);
}
console.log(handlers);
}
}
然后使用EventTarget类型的自定义事件:
function handleMessage(event) {
alert("Message received:" + event.message);
}
//创建一个新对象
var target = new EventTarget()
//添加一个事件处理程序
target.addHandler("message",handleMessage)
//触发事件
target.fire({type:"message",message:"Hello World"})
//删除事件处理程序
target.removeHandler("message",handleMessage);
//触发事件不会执行
target.fire({type:"message",message:"Hello Worldmmm"})
在这段代码中,定义了handleMessage()函数用于处理message事件。它接受event对象并输出message属性。调用target对象的addHandler()方法并传给"message"以及hadleMessage()函数。在接下来的一行,调用了fire()函数,并传给了2个属性,即type和message的对象。然后删除了事件处理程序,这样即使事件再次出发,也不会显示任何警告框。
因为这种功能是封装在一种自定义类型中的,其它对象可以继承EventTarget并获得这个行为
function Person(name) {
this.name = name;
this.etarget = new EventTarget(this.name)
}
Person.prototype = {
constructor: Person,
addMessage: function(type, fn) {
this.etarget.addHandler(type, fn)
},
say: function(message) {
this.etarget.fire({ type: "message", message: message })
console.log(this.name)
}
}
function handleMessage(event) {
console.log(event)
//弹出NICHOLAS--SAYS:hi there
alert(event.target.name + "---says:" + event.message);
}
//创建新Person实例
var person = new Person("NICHOLAS");
person.addMessage("message", handleMessage);
person.say("hi there")
(adsbygoogle = window.adsbygoogle || []).push({});
- google protobuf学习笔记:编译安装、序列化、反序列化
- 自己在Qt上做的辣鸡计算器
- 【Qt】]Qt5中文乱码
- 防止连接Mysql超时,JDBC探活配置
- 剑指offer——面试题10输入一个十进制整数,统计其中二进制1的个数
- 剑指offer——面试题9计算斐波纳切第n个数
- 剑指 offer——面试题8求旋转数组的最小值
- MYSQL INNODB表压缩
- 剑指offer——年龄排序问题
- Mysql Group Replication介绍
- 剑指offer——快速排序
- 架构高性能网站秘笈(四)——反向代理缓存
- 架构高性能网站秘笈(一)——了解衡量网站性能的指标
- MYSQL5.6&5.7编译安装
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 学习一下Python3的协程
- Android网络收集和ping封装库
- Kubernetes之helm部署使用
- 想掌握 Binder 机制?驱动核心源码详解和Binder超系统学习资源,想学不会都难!
- leetcode链表之回文链表
- Docsify 安装
- Docsify 初始化文件夹
- ELK 日志系统集成 Skywalking 调用链 ID
- ChartCenter ——为您的K8s之旅保驾护航v
- leetcode链表之删除链表的节点
- iOS打包的那一些事情
- 腾讯云服务器(CentOS 7、Tencent Linux)手动搭建LNMP环境(linux+Nginx+Mariadb+PHP)
- iOS技术面试题及答案
- 虽然现在有可以去码的软件了,可视频是如何自动跟踪打码的?
- 2020-09-12:手撕代码:最小公倍数,复杂度多少?