js 自定义事件

自定义事件很难派上用场?

为什么自定义事件很难派上用场,因为以前js不是模块化开发,也很少协作。因为事件本质是一种通信方式,是一种消息,只有存在多个对象,多个模块的情况下,才有可能需要用到事件进行通信。而现在有了模块化之后,已经可以使用自定义事件进行各模块间协作了。

哪里用得到自定义事件?

事件本质是一种消息,事件模式本质上是观察者模式的实现,那么用得上观察者模式的地方,自然也可以也可以用上事件模式。所以,如果:

1、一个目标对象改变,需要多个观察者调整自身的。

比如:我需要元素A点击之后,元素B显示鼠标的位置,元素C显示提示,元素D.....

2、分模块协作需要解耦的

比如:甲负责模块A,乙负责模块B,模块B需要A运行完之后才能运行

传统的写法将逻辑写在一个方法里面:


function doSomething(){A();B();
}

这样做每次扩展都要修改a的点击函数,不好扩展。

自定义事件的写法

//1、创建事件
var clickElem = new Event("clickElem");//2、注册事件监听器
elem.addEventListener("clickElem",function(e){//干点事
})//3、触发事件
elem.dispatchEvent(clickElem);

可以看到,elem通过dispatchEvent方法触发的事件,只有elem上注册的监听器才能监听得到。这就很没意思了,自己发给自己消息,通知自己去干什么。

创建自定义事件可参考: MDN : Creating_and_triggering_events

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

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

相关文章

uWSGI安装配置

uWSGI安装配置官方网站:http://uwsgi-docs.readthedocs.io环境:CentOS 7.2python-2.7.5一.安装yum -y install gcc gcc-c python-develcurl -sSL https://projects.unbit.it/downloads/uwsgi-2.0.14.tar.gz |tar -xvf - --gzipcd uwsgi-2.0.14make -j4################# uWSGI …

python日志输出 超量 停止_linux 内存分配参数导致的 buffer_pool 分配不出来的问题排查...

linux 内存分配参数导致的 buffer_pool 分配不出来的问题排查:参考:http://blog.csdn.net/jollyjumper/article/details/24127009原文:http://www.cnblogs.com/gomysql/p/6130405.htmlvm.overcommit_memory默认值为:0从内核文档里…

javascript自定义事件应用实例

可以先看例子 从 js 自定义事件 里知道:元素A通过dispatchEvent方法触发的事件,只有A上注册的监听器才能监听得到。 我们想要的效果是,别的对象干了某件事之后, 发个消息给我们,好让我们能做相应的改变。要做到这样…

啥是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, 有人给出了解…