Javascript自定义事件功能与用法实例分析
原文地址:https://www.jb51.net/article/127776.htm
本文实例讲述了javascript自定义事件功能与用法。分享给大家供大家参考,具体如下:
概述
自定义事件很难派上用场?
为什么自定义事件很难派上用场,因为以前js不是模块化开发,也很少协作。因为事件本质是一种通信方式,是一种消息,只有存在多个对象,多个模块的情况下,才有可能需要用到事件进行通信。而现在有了模块化之后,已经可以使用自定义事件进行各模块间协作了。
哪里用得到自定义事件?
事件本质是一种消息,事件模式本质上是观察者模式的实现,那么用得上观察者模式的地方,自然也可以也可以用上事件模式。所以,如果:
1、一个目标对象改变,需要多个观察者调整自身的。
比如:我需要元素A点击之后,元素B显示鼠标的位置,元素C显示提示,元素D.....
2、分模块协作需要解耦的
比如:甲负责模块A,乙负责模块B,模块B需要A运行完之后才能运行
传统的写法将逻辑写在一个方法里面:
1
2
3
4
|
function doSomething(){ A(); B(); } |
这样做每次扩展都要修改a的点击函数,不好扩展。
自定义事件的写法
1
2
3
4
5
6
7
8
|
//1、创建事件 var clickElem = new Event( "clickElem" ); //2、注册事件监听器 elem.addEventListener( "clickElem" , function (e){ //干点事 }) //3、触发事件 elem.dispatchEvent(clickElem); |
可以看到,elem通过dispatchEvent方法触发的事件,只有elem上注册的监听器才能监听得到。这就很没意思了,自己发给自己消息,通知自己去干什么。
创建自定义事件可参考: MDN : Creating_and_triggering_events
应用
从前面 js 自定义事件 的描述中知道:元素A通过dispatchEvent方法触发的事件,只有A上注册的监听器才能监听得到。
我们想要的效果是,别的对象干了某件事之后, 发个消息给我们,好让我们能做相应的改变。要做到这样,也不是没办法:我们可以在一个公共对象上监听和触发事件,这就很有意义了。
例子一:通知多个对象
要实现 元素A点击之后,元素B显示鼠标的位置,元素C显示提示,可以这样写:
文件:a.js
1
2
3
4
5
6
7
|
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:
1
2
3
4
|
var b = document.getElementById( "b" ); document.addEventListener( "clickA" , function (e){ b.innerHTML = "(128,345)" ; }) |
文件c.js:
1
2
3
4
|
var c = document.getElementById( "c" ); document.addEventListener( "clickA" , function (e){ c.innerHTML = "你点了A" ; }) |
这样写,三个模块之间完全不用关心对象,也不知道对方存在,耦合度非常的低,完全可以独立编写,不会互相影响。这其实就是一个观察者模式的实现。
例子二:游戏框架
要开发一个游戏,启动游戏,加载图片和音乐,加载完后,渲染场景和音效,加载和渲染由不同的人负责。可以这样写:
文件:index.js
1
2
3
4
5
6
7
8
|
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
1
2
3
4
5
6
7
8
|
// 加载图片 document.addEventListener( "gameStart" , function (){ console.log( "加载图片..." ); setTimeout( function (){ console.log( "加载图片完成" ); document.dispatchEvent( new Event( "loadImageSuccess" )); },1000); }); |
文件:loadMusic.js
1
2
3
4
5
6
7
8
|
//加载音乐 document.addEventListener( "gameStart" , function (){ console.log( "加载音乐..." ); setTimeout( function (){ console.log( "加载音乐完成" ); document.dispatchEvent( new Event( "loadMusicSuccess" )); },2000); }); |
文件:initScene.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//渲染场景 document.addEventListener( "loadImageSuccess" , function (e){ console.log( "使用图片创建场景..." ); setTimeout( function (){ console.log( "创建场景完成" ); },2000) }); //渲染音效 document.addEventListener( "loadMusicSuccess" , function (e){ console.log( "使用音乐创建音效..." ); setTimeout( function (){ console.log( "创建音效完成" ); },500) }); |
加载模块和渲染模块互不影响,易于扩展。
携带信息
除此之外,事件还能传递自定义信息:
1
2
|
var event = new CustomEvent( 'myEvent' , { 'dataName' : dataContent }); document.dispatchEvent(event); |
(注意:传递自定义信息需要使用CustomEvent,而不是Event)
然后在监听函数里取出:
1
2
3
|
document.addEventListener( "myEvent" , function (e){ console.log(e.dataName); }) |
这个功能非常有用!
附:点击此处查看github示例
PS:这里再为大家附上javascript系统自带事件参考表供大家参考查询:
javascript事件与功能说明大全:
http://tools.jb51.net/table/javascript_event
Javascript自定义事件功能与用法实例分析的更多相关文章
- Jackson的用法实例分析
这篇文章主要介绍了Jackson的用法实例分析,用于处理Java的json格式数据非常实用,需要的朋友可以参考下 通俗的来说,Jackson是一个 Java 用来处理 JSON 格式数据的类库,其性能 ...
- Javascript事件模型系列(四)我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- 理解的javascript自定义事件
理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...
- javascript:自定义事件初探
javascript:自定义事件初探 http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html
- Python实现的选择排序算法原理与用法实例分析
Python实现的选择排序算法原理与用法实例分析 这篇文章主要介绍了Python实现的选择排序算法,简单描述了选择排序的原理,并结合实例形式分析了Python实现与应用选择排序的具体操作技巧,需要的朋 ...
- javascript 自定义事件 发布-订阅 模式 Event
* javascript自定义事件 var myEvent = document.createEvent("Event"); myEvent.initEvent("myE ...
- 高级功能:很有用的javascript自定义事件
之前写了篇文章<原生javascript实现类似jquery on方法的行为监听>比较浅显,能够简单的使用场景. 这里的自定义事件指的是区别javascript默认的与DOM交互的事件,比 ...
- JavaScript自定义事件
很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定 ...
- Javascript 自定义事件 (custom event)
Javascript 中经常会用到自定义事件.如何创建一个简单的自定义事件呢?在创建自定义的事件之前,我们应该考虑一下和事件有关的东西.例如 click 事件,首先我们要能注册一个click事件(在一 ...
随机推荐
- 新添加的磁盘大于2T 的分区方法
环境CentOS7.1 2.9t磁盘 fdisk 只能分区小于2t的磁盘,大于2t的话,就要用到parted 1,将磁盘上原有的分区删除掉: 进入:#parted /dev/sdb 查看:(par ...
- bcb中TParamter传NULL值
if (status_Desc.IsEmpty()) Queue_Status->Value = Null(); else Queue_Status->Value = status_Des ...
- 网站检测空链、死链工具(Xenu)
网站常用检测空链.死链工具,Xenu是很小但是功能强大的检查网站404链接的软件,支持多线程,无需安装可直接打开使用.步骤如下: 网站的链接一般都成千上万,如果存在大量的空链接将大大的影响用户体验,怎 ...
- Caused by: org.xml.sax.SAXParseException; lineNumber: 64; columnNumber: 27; The entity name must immediately follow the '&' in the entity reference.
java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test.conte ...
- win32gui.EnumWindows
python2 import win32gui, win32con, win32api import time, math, random def _MyCallback( hwnd, extra ) ...
- RCNN,Fast RCNN,Faster RCNN 的前生今世:(2)R-CNN
Region CNN(RCNN)可以说是利用深度学习进行目标检测的开山之作.作者Ross Girshick多次在PASCAL VOC的目标检测竞赛中折桂,2010年更带领团队获得终身成就奖,如今供职于 ...
- 指数基金介绍专栏(8):国企指数(H股指数)详细介绍,最新资料解析,看这一篇就够了
作者:牛大 | 公众号:定投五分钟 大家好,我是牛大.每天五分钟,投资你自己:坚持基金定投,终会财富自由! 昨天牛大给大家介绍了恒生指数,没看的朋友可以去公众号看一下. 指数基金介绍专栏(7):恒生指 ...
- [Svelte 3] Use Svelte 3 transitions to gracefully show and hide DOM elements
Most websites are quite static and adding some animations/transitions can improve the user experienc ...
- Tensorflow 细节P-40
1.绝大部分时候都会忽略graph的使用,如下代码所示,学会怎样tf.get_default_graph()是重要的,此外注意变量定义时的初始化必须加 initializer 2.此外,要知道 wri ...
- MCMC蒙特卡罗马尔科夫模型
https://www.cnblogs.com/pinard/p/6645766.html https://blog.csdn.net/saltriver/article/details/521949 ...