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 相关文章推荐
JS实现闪动的title消息提醒效果
Jun 20 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
javascript 禁止复制网页
2009/06/11 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
js实现返回顶部效果
2017/03/10 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
深入浅析python with语句简介
2018/04/11 Python
django 多数据库配置教程
2018/05/30 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
浅析使用Python搭建http服务器
2019/10/27 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
Python中Yield的基本用法
2020/10/18 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
论文诚信承诺书
2014/05/23 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
代理词怎么写
2015/05/25 职场文书
入团申请书格式
2019/06/20 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python