javascript自定义事件功能与用法实例分析


Posted in Javascript onNovember 08, 2017

本文实例讲述了javascript自定义事件功能与用法。分享给大家供大家参考,具体如下:

概述

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

为什么自定义事件很难派上用场,因为以前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

应用

从前面 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);
})

这个功能非常有用!

Javascript 相关文章推荐
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
javascript清空table表格的方法
May 14 Javascript
javascript实现日期按月份加减
May 15 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
js实现消息滚动效果
Jan 18 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 #jQuery
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 #Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 #Javascript
vue中实现滚动加载更多的示例
Nov 08 #Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 #Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 #Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 #Javascript
You might like
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
JavaScript数组去重算法实例小结
2018/05/07 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
对Python信号处理模块signal详解
2019/01/09 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Python多进程编程常用方法解析
2020/03/26 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
德国PC硬件网站:CASEKING
2016/10/20 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
初中科学教学反思
2014/01/21 职场文书
建议书标准格式
2014/03/12 职场文书
冬季安全检查方案
2014/05/23 职场文书
安全演讲稿开场白
2014/08/25 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js