菜单

javascript自定义事件功效与用法实例深入分析

2019年6月6日 - 金沙前端

举例:作者急需成分A点击之后,成分B呈现鼠标的岗位,成分C彰显提示,成分D…..

比方说:甲负担模块A,乙负担模块B,模块B必要A运转完之后能力运作

其壹效能相当实用!

应用

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

事件真相是1种信息,事件方式本质上是观看者方式的贯彻,那么用得上观看者格局的地点,自然也可以也能够用上事件方式。所以,如若:

文件b.js:

自定义事件的写法

document.addEventListener("myEvent",function(e){
  console.log(e.dataName);
})

一、二个对象对象更动,必要多个观察者调解自身的。

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

除开,事件还是可以传递自定义音信:

为啥自定义事件很难派上用场,因为原先js不是模块化开辟,也没有多少同盟。因为事件真相是一种通讯方式,是一种新闻,唯有存在八个对象,多个模块的事态下,才有相当的大可能率须求选择事件展开通讯。而最近有了模块化之后,已经能够应用自定义事件进展各模块间合作了。

//加载音乐
document.addEventListener("gameStart",function(){
  console.log("加载音乐...");
  setTimeout(function(){
    console.log("加载音乐完成");
    document.dispatchEvent(new Event("loadMusicSuccess"));
  },2000);
});

javascript事件与效果表达大全:

只顾:import进来的变量尽管不利用,不过一定无法轻松

诸如此类做每一次扩大都要修改a的点击函数,倒霉扩充。

要完结 成分A点击之后,成分B展现鼠标的职责,成分C展现提醒,能够这么写:

下一场在监听函数里收取:

PS:这里再为大家附上javascript系统自带事件参谋表供我们参考查询:

附:点击这里查看github示例

企望本文所述对大家JavaScript程序设计有着支持。

从日前 js 自定义事件
的叙说中级知识分子晓:成分A透过dispatch伊夫nt方法触发的事件,唯有A上注册的监听器才具监听拿到。

(注意:传递自定义务消防队息需求接纳Custom伊夫nt,而不是伊夫nt)

概述

//渲染场景
document.addEventListener("loadImageSuccess",function(e){
  console.log("使用图片创建场景...");
  setTimeout(function(){
    console.log("创建场景完成");
  },2000)
});
//渲染音效
document.addEventListener("loadMusicSuccess",function(e){
  console.log("使用音乐创建音效...");
  setTimeout(function(){
    console.log("创建音效完成");
  },500)
});

文件:loadMusic.js

哪个地方用赢得自定义事件?

澳门金沙国际,文件c.js:

创办自定义事件可参看: MDN :
Creating_and_triggering_events

文件:index.js

var b = document.getElementById("b");
document.addEventListener("clickA",function(e){
  b.innerHTML = "(128,345)";
})

本文实例讲述了javascript自定义事件效用与用法。分享给大家供我们仿效,具体如下:

2、分模块合营需求解耦的

文件:initScene.js

如此写,多个模块之间完全不用关爱对象,也不驾驭对方存在,耦合度非常低,完全能够单独编写,不会互相影响。那实际正是3个观察者形式的贯彻。

// 加载图片
document.addEventListener("gameStart",function(){
  console.log("加载图片...");
  setTimeout(function(){
    console.log("加载图片完成");
    document.dispatchEvent(new Event("loadImageSuccess"));
  },1000);
});
var c = document.getElementById("c");
document.addEventListener("clickA",function(e){
  c.innerHTML = "你点了A";
})

加载模块和渲染模块互不影响,易于扩大。

更加多关于JavaScript相关内容感兴趣的读者可查看本站专项论题:《JavaScript事件有关操作与技巧大全》、《JavaScript操作DOM能力计算》、《JavaScript错误与调解技艺总计》、《JavaScript数据结构与算法手艺总括》、《JavaScript遍历算法与手艺总结》及《JavaScript数学生运动算用法总括》

你恐怕感兴趣的篇章:

能够见到,elem通过dispatch伊夫nt方法触发的风浪,唯有elem上注册的监听器本事监听获得。这就很雅淡了,本人发给自身消息,布告自个儿去干什么。

文件:loadImage.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);
});

价值观的写法将逻辑写在3个艺术里面:

要开采三个游玩,运行游戏,加载图片和音乐,加载完后,渲染场景和音响效果,加载和渲染由区别的人担负。可以这么写:

var event = new CustomEvent('myEvent', { 'dataName': dataContent });
document.dispatchEvent(event);

事例二:游戏框架

指点音讯

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

文件:a.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"));
})

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图