What is an event

Let’s take a look at MDN’s explanation:

An event is an action or something that happens in the system when you program it, and after the system responds to the event, you can react to it in some way if you need to.

An event is a mechanism by which certain actions or actions are triggered and others are automatically executed. Take the commonly used click event as an example, when the click occurs, it will trigger some actions we set, such as jump to the page, record the number of clicks and so on

For better understanding, some API usage has been simplified, and those who are interested can refer to the reference links at the end of this article

How do I customize events

There are currently two ways to implement custom events

  • Event()
  • CustomEvent()

Before we introduce these two methods, we need to take a quick look at the other two methods – addEventListener and dispatchEvent

addEventListener

As the name suggests, what this method does is it adds event listening so that when we generate a new event, we have to have this method listening so that the system knows whether or not we fired the event

target.addEventListener(type, listener, options);
Copy the code

Target can be an Element on a Document, like Element,Document, or Window, or any other object that supports an event. Type: Specifies the name of the event we want to listen for

-Lily: Options, listener configuration, listener configuration, listener configuration, listener configuration, listener configuration

dispatchEvent

Fires the event we defined

target.dispatchEvent(event)
Copy the code

Target Same as event: indicates the event object to be sent

Event()

Syntax and Parameters

const myEvent = new Event(eventName, eventOptions);
Copy the code

EventName: indicates the eventName. This parameter is mandatory. EventOptions: indicates the Object type

field instructions type The default value
bubbles Whether the event bubbles Boolean false
bubbles Whether the event bubbles Boolean false
cancelable Whether the event can be cancelled Boolean false

CustomEvent()

Syntax and Parameters

const myEvent = new CustomEvent(eventName, eventOptions);
Copy the code

EventName: indicates the eventName. This parameter is mandatory. EventOptions: indicates the Object type

field instructions type The default value
detail The data that needs to be passed in the event Any null
bubbles Whether the event bubbles Boolean false
cancelable Whether the event can be cancelled Boolean false

usage

const sendEvent = new Event("sendMsg")
document.addEventListener("sendMsg",print)
document.dispatchEvent(sendEvent)
function print() {
  console.log("The content is pornographic and vulgar.")}// result: Pornographic and vulgar content.
Copy the code
const sendEvent = new CustomEvent("sendMsg", {detail: {name: "mayoha"
}})
document.addEventListener("sendMsg",print)
document.dispatchEvent(sendEvent)
function print(e) {
  console.log(e.detail.name)
}
Copy the code

From the two simple examples above, we can see that the biggest difference between Event and CustomEvent is that CustomEvent can pass data

The practical application

Event model and the observer pattern is essentially the same, so who can use this mode observer, you can use the event to solve Now let’s enumerate a simple situation and implementation situation: it has an array arr, whenever the array after adding new elements, we all want to print it again

let arr = []

function add(detail) {
  document.dispatchEvent(
    new CustomEvent("onAdd", {
      detail
    })
  )
}
// Listen for add events
document.addEventListener("onAdd".(e) = > {
  e.detail ? arr.push(e.detail.age) : null
  console.log(arr)
})
// Trigger the event
add()
add({age: 18})
Copy the code

If we don’t use this mode, we have to print the array manually after the array changes. Of course, after we don’t need to listen for the event, we have to unlisten for the event using removeEventListener (the same usage as addEventListener)

conclusion

The use of custom events is extremely rare. After all, Vue and React have their own custom events, so we just use them directly. I am also to learn the booklet “Electron + React from 0 to 1 to achieve a resume platform combat” (Wide hit advertising costs!!) See hiro use custom events for communication, interested in learning about it, the way to record.

reference

AddEventListener dispatchEvent Describes the Creating and Triggering Events