当前位置: 首页 > news >正文

javascript自定义事件的观察者模式写法和用法以及继承

<html><head><meta http-equiv="Context-Type:text/html;charset=utf-8"/><title>自定义事件之观察者模式</title><script type="text/javascript" src="common.js"></script></head><body><input type="button" name="btn" value="点击" id="mybtn"/><script type="text/javascript">//继承关系函数function inherit(sub,sup){var prototype=Object(sup.prototype);prototype.constructor=sub;sub.prototype=prototype;}//父类函数function EventTarget(){this.handlers={};}//父类函数的原型方法EventTarget.prototype={//使用字面量对象的原型方法必须加上构造函数原自父类,不然字面量原型方法就继承于object对象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;console.log(event);}if(this.handlers[event.type] instanceof Array){var handlers=this.handlers[event.type];//console.info(handlers);for(var i=0;i<handlers.length;i++){handlers[i](event);}}},//删除自定义事件函数removeHandler:function(type,handler){if(this.handlers[type] instanceof Array){var handlers=this.handlers[type];for(var i=0;i<handlers.length;i++){if(handlers[i]===handler){break;}}handlers.splice(i,1);}}};//子类function Person(name,age){EventTarget.call(this);this.name=name;this.age=age;}//子类继承父类inherit(Person,EventTarget);//执行自定义事件函数Person.prototype.say=function(message){//type表示你自定义事件的种类,message表示触发后的信息this.fire({type:"message",message:message});}//执行自定义的事件的函数Person.prototype.data=function(event,str){//这里type同样表示自定义事件的种类,event表示传递过来的事件,data:str表示传递的数据this.fire({//event这里表示从re()函数的btn事件中传递过来的点击事件type:'data',x:event.clientX,y:event.clientY,data:str});};//getna事件,获取person的name\agePerson.prototype.getna=function(arr){this.fire({type:'getna',getna:arr});}//一般事件信息处理函数function hm(event){alert("message received: "+event.message);}//这里re(event)中的event表示从data事件中传递过来的event//处理点击事件带数据的函数function re(event){var ss=event;btn.onclick=function(event){var event=EventUtil.getEvent(event);var target=EventUtil.getTarget(event);alert(event.x+":"+event.y);console.info(ss.data);}}//处理getna事件的函数function getnameage(event){alert(event.getna);}//创建实例var person=new Person('Nicholas',23);//注册一般事件信息person.addHandler("message",hm);//注册点击事件,获取点击的坐标person.addHandler('data',re);//触发一般事件的信息person.say("Hi i am here");var btn=document.getElementById('mybtn');//触发带数据的点击事件person.data('','dfd');//先注册getna事件person.addHandler('getna',getnameage);//然后触发getna事件的函数person.getna([person.name,person.age]);</script></body>
</html>

相关文章:

javascript自定义事件的观察者模式写法和用法以及继承

<html><head><meta http-equiv"Context-Type:text/html;charsetutf-8"/><title>自定义事件之观察者模式</title><script type"text/javascript" src"common.js"></script></head><body>&…...

蓝桥杯官网练习题(正则问题)

题目描述 考虑一种简单的正则表达式&#xff1a; 只由 x ( ) | 组成的正则表达式。 小明想求出这个正则表达式能接受的最长字符串的长度。 例如 ((xx|xxx)x|(x|xx))xx 能接受的最长字符串是&#xff1a; xxxxxx&#xff0c;长度是 6。 输入描述 一个由 x()| 组成的正则表…...

iOS使用NSURLSession实现后台上传

NSURLSession后台上传的基本逻辑是&#xff1a;首先创建一个后台模式的NSURLSessionConfiguration&#xff0c;然后通过这个configuration创建一个NSURLSession&#xff0c;接着是创建相关的NSURLSessionTask&#xff0c;最后就是处理相关的代理事件。 1、创建NSURLSession -…...

linux之信号

Linux之信号 什么是信号信号的产生方式signalsignactionkill信号集信号屏蔽 什么是信号 信号机制是一种使用信号来进行进程之间传递消息的方法&#xff0c;信号的全称为软中断信号&#xff0c;简称软中断。 信号的本质是软件层次上对中断的一种模拟&#xff08;软中断&#xff…...

golang工程中间件——redis常用结构及应用(string, hash, list)

Redis 命令中心 【golang工程中间件——redisxxxxx】这些篇文章专门以应用为主&#xff0c;原理性的后续博主复习到的时候再详细阐述 string结构以及应用 字符数组&#xff0c;redis字符串是二进制安全字符串&#xff0c;可以存储图片等二进制数据&#xff0c;同时也可以存…...

Java中数据结构(基本数据类型+引用数据类型)介绍+整理+例子+对比

一、Java数据类型分类 在Java中&#xff0c;数据类型可以分为两大类&#xff1a;内置数据类型&#xff08;Primitive Data Types&#xff09;和引用数据类型&#xff08;Reference Data Types&#xff09;。 **内置数据类型&#xff08;Primitive Data Types&#xff09;**是…...

SpringSecurity原理

Spring Security是Spring框架中的一个安全性框架&#xff0c;用于保护Web应用程序。以下是Spring Security的工作原理&#xff1a; 1.认证 认证是指验证用户身份。Spring Security使用过滤器链来拦截用户的请求。在对请求进行处理之前&#xff0c;它需要对用户进行认证。Spri…...

云表平台突破传统,企业级低代码让软件开发速度提升

随着数字化进程的加速推进&#xff0c;软件开发效率和成本的要求也在日益提高。在这个背景下&#xff0c;低代码技术的出现为企业软件开发提供了新的解决方案。低代码开发平台以其简单易用、高效灵活的特点&#xff0c;已经成为各行各业企业进行应用开发的首选工具。 企业中低代…...

三数之和(双指针)

15. 三数之和 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三…...

Linux-bluetooth蓝牙

蓝牙配对和蓝牙连接 蓝牙配对是指在两个蓝牙设备之间建立一种安全的关系&#xff0c;以确保只有已经通过授权的设备才能进行通信。在蓝牙配对过程中&#xff0c;设备之间将共享一个加密密钥&#xff0c;用于保护数据传输的安全性。通常需要在设备上输入一个PIN码或者进行手动确…...

mediasoup webrtc音视频会议搭建

环境ubuntu22.10 nvm --version 0.33.11 node -v v16.20.2 npm -v 8.19.4 node-gyp -v v10.0.1 python3 --version Python 3.10.7 python with pip: sudo apt install python3-pip gcc&g version 12.2.0 (Ubuntu 12.2.0-3ubuntu1) Make 4.2.1 npm install mediasoup3 sudo …...

【操作系统】操作系统的大端模式和小端模式

什么是大端模式、小端模式&#xff1f; 所谓的大端模式&#xff0c;是指数据的低位保存在内存的高地址中&#xff0c;而数据的高位保存在内存的低地址中&#xff1b; 所谓的小端模式&#xff0c;是指数据的低位保存在内存的低地址中&#xff0c;而数据的高位保存在内存的高地…...

Oracle(13)Maintaining Data Integrity

目录 一、基础知识 1、Data Integrity 数据库的完整性 2、Types of Constraints 约束类型 3、Constraint States 约束状态 4、Guidelines for Constraints 约束准则 二、基础操作 1、Enabling Constraints 启用约束 2、命令方式创建约束 3、修改表创建的约束 4、删除约…...

工程(十二)Ubuntu20.04LSD_SLAM运行

博主创建了一个科研互助群Q&#xff1a;772356582&#xff0c;欢迎大家加入讨论。这是一个科研互助群&#xff0c;主要围绕机器人&#xff0c;无人驾驶&#xff0c;无人机方面的感知定位&#xff0c;决策规划&#xff0c;以及论文发表经验&#xff0c;以方便大家很好很快的科研…...

跨境电商,用指纹浏览器还是VPS?有何区别?

目前做跨境电商的小伙伴基本都是选择vps或者指纹浏览器来防关联。不过随着指纹浏览器的普及&#xff0c;越来越多人选择使用指纹浏览器&#xff0c;还没了解过指纹浏览器的小伙伴可能还在犹豫&#xff0c;vps和指纹浏览器到底哪个更好呢&#xff1f; Vps就是一个虚拟服务器&…...

R语言piecewiseSEM结构方程模型在生态环境领域实践技术应用

结构方程模型&#xff08;Sructural Equation Modeling&#xff0c;SEM&#xff09;可分析系统内变量间的相互关系&#xff0c;并通过图形化方式清晰展示系统中多变量因果关系网&#xff0c;具有强大的数据分析功能和广泛的适用性&#xff0c;是近年来生态、进化、环境、地学、…...

一站式解决方案:体验亚马逊轻量服务器/VPS的顶级服务与灵活性

文章目录 一、什么是轻量级服务器/VPS 二、服务器创建步骤 三、服务器连接客户端(私钥登录) 四、使用服务器搭建博客网站 五、个人浅解及总结 一、什么是轻量级服务器/VPS 亚马逊推出的轻量级服务器/VPS&#xff1a;是一种基于云计算技术的虚拟服务器解决方案。它允许用户…...

pda条码二维码扫描数据采集安卓手持终端扫码热敏标签打印一体机

HT800新一代移动物联终端是深圳联强优创信息科技有限公司自主研发的基于Android11操作系统的高性能、高可靠的工业级手持数据终端&#xff0c;能与其它设备进行无线通讯&#xff0c;提供良好的操作界面&#xff0c;支持条码扫描、RFID读写&#xff08;NFC&#xff09;、GPS定位…...

白上这么多年班,才知道数据可视化这么简单

写编程整理数据、做数据可视化分析&#xff0c;不仅难度大、易僵化&#xff0c;还效率低&#xff0c;不能及时响应业务的数据分析需求。那怎么办&#xff1f;换个BI数据可视化工具&#xff0c;套用BI方案&#xff0c;数据分析模型、BI数据可视化分析报表都一应俱全&#xff0c;…...

伊朗黑客对以色列科技和教育领域发起破坏性网络攻击

导语 近期&#xff0c;以色列的高等教育和科技领域遭受了一系列破坏性的网络攻击。这些攻击始于2023年1月&#xff0c;旨在部署以前未记录的数据清除恶意软件。在最近的攻击中&#xff0c;攻击者试图窃取个人身份信息和知识产权等敏感数据。本文将介绍这些攻击的具体细节&#…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

Linux-进程间的通信

1、IPC&#xff1a; Inter Process Communication&#xff08;进程间通信&#xff09;&#xff1a; 由于每个进程在操作系统中有独立的地址空间&#xff0c;它们不能像线程那样直接访问彼此的内存&#xff0c;所以必须通过某种方式进行通信。 常见的 IPC 方式包括&#…...