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>&…...
蓝桥杯官网练习题（正则问题）
题目描述 考虑一种简单的正则表达式： 只由 x ( ) | 组成的正则表达式。 小明想求出这个正则表达式能接受的最长字符串的长度。 例如 ((xx|xxx)x|(x|xx))xx 能接受的最长字符串是： xxxxxx，长度是 6。 输入描述 一个由 x()| 组成的正则表…...
iOS使用NSURLSession实现后台上传
NSURLSession后台上传的基本逻辑是：首先创建一个后台模式的NSURLSessionConfiguration，然后通过这个configuration创建一个NSURLSession，接着是创建相关的NSURLSessionTask，最后就是处理相关的代理事件。 1、创建NSURLSession -…...
linux之信号
Linux之信号 什么是信号信号的产生方式signalsignactionkill信号集信号屏蔽 什么是信号 信号机制是一种使用信号来进行进程之间传递消息的方法，信号的全称为软中断信号，简称软中断。 信号的本质是软件层次上对中断的一种模拟（软中断ÿ…...
golang工程中间件——redis常用结构及应用（string, hash, list）
Redis 命令中心 【golang工程中间件——redisxxxxx】这些篇文章专门以应用为主，原理性的后续博主复习到的时候再详细阐述 string结构以及应用 字符数组，redis字符串是二进制安全字符串，可以存储图片等二进制数据，同时也可以存…...
Java中数据结构（基本数据类型+引用数据类型）介绍+整理+例子+对比
一、Java数据类型分类 在Java中，数据类型可以分为两大类：内置数据类型（Primitive Data Types）和引用数据类型（Reference Data Types）。 **内置数据类型（Primitive Data Types）**是…...
SpringSecurity原理
Spring Security是Spring框架中的一个安全性框架，用于保护Web应用程序。以下是Spring Security的工作原理： 1.认证 认证是指验证用户身份。Spring Security使用过滤器链来拦截用户的请求。在对请求进行处理之前，它需要对用户进行认证。Spri…...
云表平台突破传统，企业级低代码让软件开发速度提升
随着数字化进程的加速推进，软件开发效率和成本的要求也在日益提高。在这个背景下，低代码技术的出现为企业软件开发提供了新的解决方案。低代码开发平台以其简单易用、高效灵活的特点，已经成为各行各业企业进行应用开发的首选工具。 企业中低代…...
三数之和（双指针）
15. 三数之和 - 力扣（LeetCode） 题目描述 给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ，同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三…...
Linux-bluetooth蓝牙
蓝牙配对和蓝牙连接 蓝牙配对是指在两个蓝牙设备之间建立一种安全的关系，以确保只有已经通过授权的设备才能进行通信。在蓝牙配对过程中，设备之间将共享一个加密密钥，用于保护数据传输的安全性。通常需要在设备上输入一个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 …...
【操作系统】操作系统的大端模式和小端模式
什么是大端模式、小端模式？ 所谓的大端模式，是指数据的低位保存在内存的高地址中，而数据的高位保存在内存的低地址中； 所谓的小端模式，是指数据的低位保存在内存的低地址中，而数据的高位保存在内存的高地…...
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：772356582，欢迎大家加入讨论。这是一个科研互助群，主要围绕机器人，无人驾驶，无人机方面的感知定位，决策规划，以及论文发表经验，以方便大家很好很快的科研…...
跨境电商，用指纹浏览器还是VPS？有何区别？
目前做跨境电商的小伙伴基本都是选择vps或者指纹浏览器来防关联。不过随着指纹浏览器的普及，越来越多人选择使用指纹浏览器，还没了解过指纹浏览器的小伙伴可能还在犹豫，vps和指纹浏览器到底哪个更好呢？ Vps就是一个虚拟服务器&…...
R语言piecewiseSEM结构方程模型在生态环境领域实践技术应用
结构方程模型（Sructural Equation Modeling，SEM）可分析系统内变量间的相互关系，并通过图形化方式清晰展示系统中多变量因果关系网，具有强大的数据分析功能和广泛的适用性，是近年来生态、进化、环境、地学、…...
一站式解决方案：体验亚马逊轻量服务器/VPS的顶级服务与灵活性
文章目录 一、什么是轻量级服务器/VPS 二、服务器创建步骤 三、服务器连接客户端(私钥登录) 四、使用服务器搭建博客网站 五、个人浅解及总结 一、什么是轻量级服务器/VPS 亚马逊推出的轻量级服务器/VPS：是一种基于云计算技术的虚拟服务器解决方案。它允许用户…...
pda条码二维码扫描数据采集安卓手持终端扫码热敏标签打印一体机
HT800新一代移动物联终端是深圳联强优创信息科技有限公司自主研发的基于Android11操作系统的高性能、高可靠的工业级手持数据终端，能与其它设备进行无线通讯，提供良好的操作界面，支持条码扫描、RFID读写（NFC）、GPS定位…...
白上这么多年班，才知道数据可视化这么简单
写编程整理数据、做数据可视化分析，不仅难度大、易僵化，还效率低，不能及时响应业务的数据分析需求。那怎么办？换个BI数据可视化工具，套用BI方案，数据分析模型、BI数据可视化分析报表都一应俱全，…...
伊朗黑客对以色列科技和教育领域发起破坏性网络攻击
导语 近期，以色列的高等教育和科技领域遭受了一系列破坏性的网络攻击。这些攻击始于2023年1月，旨在部署以前未记录的数据清除恶意软件。在最近的攻击中，攻击者试图窃取个人身份信息和知识产权等敏感数据。本文将介绍这些攻击的具体细节&#…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
React Native 导航系统实战（React Navigation）
导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中，RouterProvider 是一个核心组件，用于提供基于数据路由（data routers）的新型路由方案。 它替代了传统的 <BrowserRouter>，支持更强大的数据加载和操作功能（如 loader 和…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞！！！ 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用，因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型（VLMs）在字幕生成方面…...
根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：
根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见 模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了，要么要会员、要么写的乱七八糟。这里我整理一下，把问题说清楚并且给出代码，拿去用就行，照着葫芦画瓢。 问题 在继承QWebEngineView后，重写mousePressEvent或event函数无法捕获鼠标按下事…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...
基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化（Gradient Normalization） (2) 判别器梯度间隙正则化（Discriminator Gradient Gap Regularization） (3) 自注意力机制（Self-Attention） 3. 完整损失函数 二…...