How to Create Custom Events in JavaScript

Core points

• JavaScript event handling is the basis of all client applications, but they are associated with DOM elements and may not be flexible enough. JavaScript custom events solve this problem, providing greater flexibility and ease of maintenance.
• Creating JavaScript custom events includes passing event names, details, and options to a new CustomEvent object. After creation, you can use the dispatchEvent method to dispatch this event on a specific element.
• Multiple handlers can subscribe to custom events, so that different actions can be performed based on the event. Chrome, Firefox, and Opera support custom events, and some JavaScript libraries also provide support.

JavaScript event handling is the basis of all client applications. When an event occurs on a target element (such as button clicks, mouse movements, form submissions, etc.), the handler function is executed. An event object is passed to the handler, which provides various properties and many methods to block the default operation. One disadvantage is that events are closely linked to DOM elements. Consider a simple form that accepts user comments:

<code class="language-html"><label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form></code>

When submitting the form, we can write a handler to echo the message to the screen, for example:

<code class="language-javascript">document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);</code>

What if we also want to send a message as a tweet, store it on the server, or perform other actions? For the existing event delegation method, we have two options:

1. Add more code in existing handlers. This is not flexible enough because every time a feature is added, changed, or deleted, the handler function needs to be updated and tested. Posted messages can have dozens of uses, and we are trying to apply them all to the same code block.

2. Create more event handlers for each purpose. This will produce more elegant code, but will cause maintenance issues. First, each function must perform similar operations to extract and verify messages. What if we need to change the form? Just renaming the ID requires changing the event handling code for each subscriber.

Wouldn't it be nice if we could simply trigger a custom "newMessage" event when posting a valid message? It would be even better if we could monitor document or body tags instead of referencing specific form nodes. Custom events allow us to do this. Triggering a custom event is simple; we pass the name, details, and options to the new CustomEvent object:

<code class="language-javascript">var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);</code>

In this example, "newMessage" is the custom event type. The second parameter is an object with three attributes:

• detail: A child object that provides custom information about events. In this example, we added a message and time.
• bubbles: If true, the event will bubble to the ancestor of the element that triggered the event.
• cancelable: If it is true, you can use the stopPropagation() method of the event object to cancel the event.

Now, we need to dispatch this event on a specific element, for example:

<code class="language-html"><label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form></code>

Any number of handlers can subscribe to this event using the following code:

<code class="language-javascript">document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);</code>

Demo Page

This example demonstrates the technique: View custom event demo page. The standard event handler looks for submissions of the HTML form above. This function gets the current message and assuming it is valid, a new "newMessage" event is dispatched.

<code class="language-javascript">var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);</code>

The handler can now subscribe to the "newMessage" event. The event is triggered only if a valid message exists, and since bubbles is set to true, the event can be applied to the form or any of its ancestors, such as the root document, for example:

<code class="language-javascript">document.getElementById("msgbox").dispatchEvent(event);</code>

The

The message itself can be extracted from the detail.message attribute of the event object.

Browser compatibility

At the time of writing, Chrome, Firefox, and Opera support CustomEvent objects. It is available in the nightly version of Safari, so it will likely be available in that browser soon. This object is not supported in IE9 and below. Fortunately, several JavaScript libraries support custom event delegates, so stay tuned for SitePoint to get a cross-browser solution soon.

(The FAQs part is omitted here because it does not match the pseudo-original goal and is too long.)

The above is the detailed content of How to Create Custom Events in JavaScript. For more information, please follow other related articles on the PHP Chinese website!