可以先看例子

---

從 js 自定義事件 里知道：元素A通過(guò)dispatchEvent方法觸發(fā)的事件，只有A上注冊(cè)的監(jiān)聽(tīng)器才能監(jiān)聽(tīng)得到。

我們想要的效果是，別的對(duì)象干了某件事之后， 發(fā)個(gè)消息給我們，好讓我們能做相應(yīng)的改變。要做到這樣，也不是沒(méi)辦法：我們可以在一個(gè)公共對(duì)象上監(jiān)聽(tīng)和觸發(fā)事件，這就很有意義了。

例子一：通知多個(gè)對(duì)象

要實(shí)現(xiàn) 元素A點(diǎn)擊之后，元素B顯示鼠標(biāo)的位置，元素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進(jìn)來(lái)的變量雖然不使用，但是一定不能省略

文件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 = "你點(diǎn)了A"; })

這樣寫，三個(gè)模塊之間完全不用關(guān)心對(duì)象，也不知道對(duì)方存在，耦合度非常的低，完全可以獨(dú)立編寫，不會(huì)互相影響。這其實(shí)就是一個(gè)觀察者模式的實(shí)現(xiàn)。

例子二：游戲框架

要開(kāi)發(fā)一個(gè)游戲，啟動(dòng)游戲，加載圖片和音樂(lè)，加載完后，渲染場(chǎng)景和音效，加載和渲染由不同的人負(fù)責(zé)。可以這樣寫：

文件：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("游戲開(kāi)始！");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

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

文件：initScene.js

//渲染場(chǎng)景 document.addEventListener("loadImageSuccess",function(e){console.log("使用圖片創(chuàng)建場(chǎng)景...");setTimeout(function(){console.log("創(chuàng)建場(chǎng)景完成");},2000) });//渲染音效 document.addEventListener("loadMusicSuccess",function(e){console.log("使用音樂(lè)創(chuàng)建音效...");setTimeout(function(){console.log("創(chuàng)建音效完成");},500) });

加載模塊和渲染模塊互不影響，易于擴(kuò)展。

攜帶信息

除此之外，事件還能傳遞自定義信息：

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

（注意：傳遞自定義信息需要使用CustomEvent，而不是Event）

然后在監(jiān)聽(tīng)函數(shù)里取出：

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

這個(gè)功能非常有用！

使用自定義事件的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)： 各模塊之間低耦合

缺點(diǎn)：不好定位問(wèn)題，容易導(dǎo)致詭秘的錯(cuò)誤。曾在一個(gè)項(xiàng)目上用到自定義事件，大體如下：

let i = 0; document.addEventListener("EventA",function(){i++;document.dispatchEvent(new Event("EventB")); })document.addEventListener("EventB",function(){i++;document.dispatchEvent(new Event("EventA")); //這句是不小心多加的 if(true){document.dispatchEvent(new Event("EventC"));} })document.addEventListener("EventC",function(){i++;console.log("i的值是：",i); })

你會(huì)發(fā)現(xiàn)得到一個(gè)很怪異的結(jié)果，僅僅是多加一句，整個(gè)程序的流程就完完全全的改變了，而且很難定位問(wèn)題。

要解決這種問(wèn)題，好好的打印日志或許是一個(gè)辦法。

總結(jié)

以上是生活随笔為你收集整理的javascript自定义事件应用实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。