javascript自定义事件应用实例
来源:互联网 发布:人工蜂群算法流程图 编辑:程序博客网 时间:2024/06/05 16:39
可以先看例子
从 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);})
这个功能非常有用!
0 0
- javascript自定义事件应用实例
- 实例理解自定义事件
- 自定义事件详细实例
- 自定义事件 实例讲解
- Javascript事件实例详解
- javascript:自定义事件初探
- JAVASCRIPT 自定义onchange事件
- Javascript自定义事件
- Javascript之自定义事件
- javascript自定义事件
- JavaScript自定义事件
- javascript自定义 error事件
- javascript 自定义事件
- JavaScript 自定义事件
- Javascript 自定义事件
- JavaScript自定义事件
- javascript实现自定义事件
- C#事件应用实例
- 琪露诺的算数教室——解题报告
- python实现字符串全排列(注:每个字符写在了列表里)
- uva11456——Trainsorting(LIS)
- Linux下配置 Keepalived(心跳检测部署)
- 添加阴影
- javascript自定义事件应用实例
- Qt之QComboBox
- 创建HelloWorld项目
- 【IOS学习】NSString copy or not (strong)?
- 九度 OJ 1162 I Wanna Go Home
- 浅析MySQL中exists与in的使用
- POJ 2449 A*k短路
- JAVA基础6.45——继承概述(1)
- Android----给Ta惊喜,带音乐的动态相册