javascript自定义事件应用实例

可以先看例子


从 js 自定义事件 里知道:元素A通过dispatchEvent方法触发的事件,只有A上注册的监听器才能监听得到。

我们想要的效果是,别的对象干了某件事之后, 发个消息给我们,好让我们能做相应的改变。要做到这样,也不是没办法:我们可以在一个公共对象上监听和触发事件,这就很有意义了。

例子一:通知多个对象

要实现 元素A点击之后,元素B显示鼠标的位置,元素C显示提示,可以这样写:

文件:a.js

import b from "./b"
import c from "./c"var a = document.getElementById("a");
a.addEventListener("click",function(e){var clickA = new Event("clickA");document.dispatchEvent(clickA);
});

注意:import进来的变量虽然不使用,但是一定不能省略

文件b.js:

var b = document.getElementById("b");
document.addEventListener("clickA",function(e){b.innerHTML = "(128,345)";
})

文件c.js:

var c = document.getElementById("c");
document.addEventListener("clickA",function(e){c.innerHTML = "你点了A";
})

这样写,三个模块之间完全不用关心对象,也不知道对方存在,耦合度非常的低,完全可以独立编写,不会互相影响。这其实就是一个观察者模式的实现。

例子二:游戏框架

要开发一个游戏,启动游戏,加载图片和音乐,加载完后,渲染场景和音效,加载和渲染由不同的人负责。可以这样写:

文件:index.js

import loadImage from "./loadImage"
import loadMusic from "./loadMusic"
import initScene from "./initScene"   var start = document.getElementById("start");
start.addEventListener("click",function(e){console.log("游戏开始!");document.dispatchEvent(new Event("gameStart"));
})

文件:loadImage.js

// 加载图片
document.addEventListener("gameStart",function(){console.log("加载图片...");setTimeout(function(){console.log("加载图片完成");document.dispatchEvent(new Event("loadImageSuccess"));},1000);});

文件:loadMusic.js

//加载音乐
document.addEventListener("gameStart",function(){console.log("加载音乐...");setTimeout(function(){console.log("加载音乐完成");document.dispatchEvent(new Event("loadMusicSuccess"));},2000);});

文件:initScene.js

//渲染场景
document.addEventListener("loadImageSuccess",function(e){console.log("使用图片创建场景...");setTimeout(function(){console.log("创建场景完成");},2000)
});//渲染音效
document.addEventListener("loadMusicSuccess",function(e){console.log("使用音乐创建音效...");setTimeout(function(){console.log("创建音效完成");},500)
});

加载模块和渲染模块互不影响,易于扩展。

携带信息

除此之外,事件还能传递自定义信息

var event = new CustomEvent('myEvent', { 'dataName': dataContent });document.dispatchEvent(event);

(注意:传递自定义信息需要使用CustomEvent,而不是Event

然后在监听函数里取出:

document.addEventListener("myEvent",function(e){console.log(e.dataName);
})

这个功能非常有用!

使用自定义事件的优缺点

优点: 各模块之间低耦合

缺点:不好定位问题,容易导致诡秘的错误。曾在一个项目上用到自定义事件,大体如下:

let i = 0;
document.addEventListener("EventA",function(){i++;document.dispatchEvent(new Event("EventB"));
})document.addEventListener("EventB",function(){i++;document.dispatchEvent(new Event("EventA")); //这句是不小心多加的 if(true){document.dispatchEvent(new Event("EventC"));}
})document.addEventListener("EventC",function(){i++;console.log("i的值是:",i);
})

你会发现得到一个很怪异的结果,仅仅是多加一句,整个程序的流程就完完全全的改变了,而且很难定位问题。

要解决这种问题,好好的打印日志或许是一个办法。

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

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

相关文章

啥是ETL、ELT

ETL就是Extract、Transfrom、Load即抽取、转换、加载三个英文单词首字母的集合。抽取:就是从源系统抽取需要的数据,这些源系统可以是同构也可以是异构的:比如源系统可能是Excel电子表格、XML文件、关系型数据库,而目标系统通常都是…

python无法导入numpy_python – Pycharm无法导入numpy

我的系统是Mac OS X.我首先通过macport安装numpy然后下载Pycharm并发现无论我选择哪种解释器我都无法导入numpy.结果如下:/Library/Frameworks/Python.framework/Versions/2.7/bin/python2.7 "/Users/erleye/Documents/Python/Pycharm Projects/test.py"T…

DOM Element对象的offsetXXX方法

原生js的offset***方法 c.offsetLeft 和 c.offsetTop 一般指当前元素的CSS边框相对于其offsetParent的X和Y坐标c.offsetHeight 和 c.offsetWidth 当前元素及其所有内容的高度&#xff0c;宽度。c.offsetParent 大多数元素都的都是指<body> 参考《javascript权威指南 第六…

weblogic10异常:org.hibernate.hql.ast.HqlToken

转自&#xff1a;http://www.programgo.com/article/68682994452/ 在做查询的时候&#xff0c;报出 org.hibernate.QueryException: ClassNotFoundException: org.hibernate.hql.ast.HqlToken这 个错误&#xff08;是通过数据源连接的&#xff09; 解决方法如下&#xff1a;…

出现一个黑色框按不动_创意 | 这才是走心的衣架设计,给衣服一个高逼格的家!...

12月&#xff0c;来到了年底剁手的时节自己新买的秋冬衣服&#xff0c;加上以前的衣服几乎都要把你的衣橱给撑爆了只恨衣架不够用&#xff0c;够用也没有空间可以挂衣服了也许以前的衣架只是为了挂衣服&#xff0c;让空间变得整洁一些&#xff1b;现如今&#xff0c;衣架从样式…

windows搜索工具_加快搞定并替代 Windows 10 搜索框搜索文件速度的免费小工具

毫无疑问&#xff0c;Everything 搜索是 Windows 操作系统上可用的最快的搜索工具之一。它比内置的 Windows 搜索工具快得多&#xff0c;因为它几乎立即返回结果&#xff0c;并支持许多自定义选项以优化搜索。而今天大眼仔要给大家分享的是可以把 Everything 固定的任务栏上的免…

同步和异步简述

同步&#xff1a;执行当前进程&#xff0c;当进程执行到某个请求时&#xff0c;若该请求需要一段时间才返回信息&#xff0c;那么这个进程将会一直等待下去直到请求返回。 异步&#xff1a;与同步相反&#xff0c;他不会等到直到信息返回才继续执行下去&#xff0c;而是直接执行…

计算鼠标移动的精确速度

效果 要达到无论在什么机器上&#xff0c;算出来的速度是一样的。 思路&#xff1a; 计算两次mousemove之间的位移和时间&#xff0c;就可以算出精确的速度 不要将onMousemove的调用时间间隔看成是均等的&#xff0c;事实上也不是均等的&#xff0c;而是根据机器的运行状况…

python数组元素复制_python的numpy数组 的复制问题?

还是一句一句来分析吧第一句vector numpy.array([5, 10, 15, 20])用numpy生成一个array对象 &#xff1a; vector然后第二句equal_to_ten_or_five (vector 10) | (vector 5)这里有个或操作首先 vector10 这个其实是把vector里面的所有对象与10对比&#xff0c;相同为True&a…

如何提高生产力(二)、软件的开发与采购

随着薪酬上升、劳动力人口萎缩以及文化变迁&#xff0c;公司利用廉价并卖力工作的员工获得优势的日子已经过去了。对于工厂制造企业连招聘一个技工都是很困难的事情&#xff0c;而软件企业招聘一个熟练技术的程序员更是很难。 人工成本的上升已经让行业感受到了很大的压力&…

threejs中坐标系转换和实现物体跟随鼠标移动

坐标系转换 下面函数可以将鼠标所在点的屏幕坐标转化成一个Threejs三维坐标&#xff1a; convertTo3DCoordinate(clientX,clientY){var mv new THREE.Vector3((clientX / window.innerWidth) * 2 - 1,-(clientY / window.innerHeight) * 2 1,0.5 );mv.unproject(this.camera…

excel线性拟合的斜率_协方差分析:方差分析与线性回归的统一

转自个人微信公众号【Memo_Cleon】的统计学习笔记&#xff1a;协方差分析&#xff1a;方差分析与线性回归的统一。在进行数据分析时&#xff0c;有时候我们会遇到数据基线不平的情况&#xff0c;比如两样本的t检验的示例&#xff0c;比较Labe和Meto用药13周的降压效果&#xff…

解决Jenkins打不开浏览器问题

参考&#xff1a;http://blog.csdn.net/achang21/article/details/45096003 1.控制面板禁用掉jenkins服务 2.java -jar jenkins.war提示需要高级别的jdk 去下载jdk 因为本机已经存在了1.6&#xff0c;需要1.8 并没有卸载原有的1.6版本&#xff0c;直接网上下载的1.8并安装 解决…

状态模式和策略模式的区别

区别主要体现在行为上&#xff0c;而不是结构上&#xff0c;所以&#xff0c;看时序图就能很好的看出两者的区别。 状态模式 看1.4&#xff0c;状态B是状态A创建的&#xff0c;也就是由系统本身控制的。调用者不能直接指定或改变系统的状态转移 所以&#xff0c;状态是系统自…

如何截获打印机文件_打印、复印还不会,如何在办公室里混?全程详细教学

我们在职场中&#xff0c;经常需要用到打印机&#xff0c;相信很多人都还不会打印、复印文件&#xff0c;求人不如求己&#xff0c;今天就来详细教学&#xff0c;一起来学习吧。如何使用打印机&#xff1f;首先用一根电源线和一根USB线&#xff0c;将电脑主机与打印机连接&…

外观模式案例分析

策划案 要实现选中和未选中功能&#xff1a; 未选中状态&#xff1a;点击图形进入选中状态 选中状态&#xff1a;点击<按钮进入未选中状态 实现代码 请问这是什么模式&#xff1f; import TransformController from ./TransformController //操作框控制器类 import To…

UICollectionView reloadData后cell被隐藏

在使用UICollectionView的页面执行: [self.collectionView reloadData]; 执行后&#xff0c;页面变为空白页&#xff0c;调试发现&#xff0c;执行reloadData 后UICollectionView的cell的hidden都变为YES. stackoverflow上很多人说这是UICollectionView的一个bug, 有人给出了解…

len在python_len在python

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里技术人对外发布原创技术内容的最大平台&…

【leetcode❤python】172. Factorial Trailing Zeroes

#-*- coding: UTF-8 -*-#给定一个整数N&#xff0c;那么N的阶乘N&#xff01;末尾有多少个0&#xff1f; 比如&#xff1a;N10&#xff0c;N&#xff01;3628800,N&#xff01;的末尾有2个0。#所有的尾部的0可以看做都是2*5得来的&#xff0c;所以通过计算所有的因子中2和5的个…

input ios问题 小程序_小程序可以解决哪些问题??

小程序是近几年移动互联网领域的热点&#xff0c;随着移动互联网在消费端逐渐进入到了存量时代&#xff0c;小程序成为了互联网平台向各个领域垂直发展的重要策略&#xff0c;而广大的中小创业者要想充分利用大型互联网平台的流量资源&#xff0c;小程序也是一个非常重要的渠道…