Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to achieve custom event function in javascript. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Overview

Custom events are hard to come in handy?

Why custom events are hard to come in handy, because js used to be not modular development and rarely collaborated. Because the event is essentially a way of communication, is a message, only when there are multiple objects, multiple modules, it is possible to use events to communicate. Now, with modularity, you can use custom events to collaborate between modules.

Where can I use custom events?

The event is essentially a kind of message, and the event pattern is essentially the realization of the observer pattern, so where the observer pattern is needed, the event pattern can also be used. So, if:

1. A target object changes, which requires multiple observers to adjust their own.

For example, I need element A to click, element B to show the location of the mouse, element C to display prompts, and element D.

2. Sub-module collaboration requires decoupling

For example, An is responsible for module A, B is responsible for module B, and module B needs A to run before it can be run.

The traditional way of writing is to write logic in one method:

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

To do this, you have to modify the click function of an every time you expand, so it's not good to expand.

How to write custom events

/ / 1. Create event var clickElem = new Event ("clickElem"); / / 2, register event listener elem.addEventListener ("clickElem", function (e) {/ / do something}) / / 3, trigger event elem.dispatchEvent (clickElem)

As you can see, events triggered by elem through the dispatchEvent method can only be listened to by listeners registered on elem. This is very boring, send your own message, tell yourself what to do.

For more information on creating custom events, please see: MDN: Creating_and_triggering_events

Application

From the previous description of the js custom event, we know that only the listeners registered on element A can listen to the events triggered by element A through the dispatchEvent method.

The effect we want is to send us a message after someone else has done something so that we can make changes accordingly. It's not impossible to do this: it makes sense that we can listen for and trigger events on a public object.

Example 1: notify multiple objects

To realize that after element An is clicked, element B displays the position of the mouse, and element C displays a prompt, you can write:

File: 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);})

Note: although the variables entered by import are not used, they must not be omitted.

File b.js:

Var b = document.getElementById ("b"); document.addEventListener ("clickA", function (e) {b [XSS _ clean] = "(128345)";})

File c.js:

Var c = document.getElementById ("c"); document.addEventListener ("clickA", function (e) {c[ XSS _ clean] = "you ordered A";})

Written in this way, the three modules do not care about the object at all, do not know the existence of each other, the degree of coupling is very low, can be written independently, will not affect each other. This is actually the realization of an observer pattern.

Example 2: game framework

To develop a game, start the game, load pictures and music, after loading, render the scene and sound effects, load and render by different people. You can write like this:

File: 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 ("Game on!") ; document.dispatchEvent (new Event ("gameStart");})

File: loadImage.js

/ / load picture document.addEventListener ("gameStart", function () {console.log ("load picture..."); setTimeout (function () {console.log ("load picture complete"); document.dispatchEvent (new Event ("loadImageSuccess"));}, 1000);})

File: loadMusic.js

/ / load music document.addEventListener ("gameStart", function () {console.log ("load music..."); setTimeout (function () {console.log ("load music complete"); document.dispatchEvent (new Event ("loadMusicSuccess"));}, 2000);})

File: initScene.js

/ / render scene document.addEventListener ("loadImageSuccess", function (e) {console.log ("create scene using pictures..."); setTimeout (function () {console.log ("scene creation complete");}, 2000)}); / / render sound effects document.addEventListener ("loadMusicSuccess", function (e) {console.log ("create sound effects using music..."); setTimeout (function () {console.log ("create sound effects complete") }, 500)})

The loading module and rendering module do not affect each other and are easy to expand.

Carry information

In addition, events can also convey custom information:

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

(note: CustomEvent, not Event, is required to pass custom information.)

Then take it out of the listener function:

Document.addEventListener ("myEvent", function (e) {console.log (e.dataName);}) these are all the contents of the article "how to implement custom events in javascript". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.