A probe into the implementation of JS custom events

The events that we are generally familiar with are: Onclick,onmouseover,ontouchstart,onfocus ...

But here we will discuss the implementation of custom events, including: Event Registration/monitoring, event distribution.

There are two ways to achieve this:

1. Implement the Event Manager yourself: Customeventmanager

2. Using Document.createevent

First way.

The realization of Customeventmanager

To implement a complete event system, there must be 2 features: registration/monitoring, triggering, and pseudo-code representation:

function Customeventmanager () {}customeventmanager.prototype.listen = function () {} CustomEventManager.prototype.dispatch = function () {}

Use:

var eventmanager = new Customeventmanager (), var div1 = document.getElementById (' Div1 '); Eventmanager.listen (Div1, ' song ', function (e,params) {e.innerhtml = params.title}); Omit business logic 10,000 lines, and then under certain conditions, trigger song event Eventmanager.dispatch (' song ', {title: "My Skateboard Shoes"})

This code means: Div1 This DOM listens to song event, when the song event is triggered, DIV1 display "My skateboard shoes."

Some people may have doubts, why not directly in dispatch that place directly ' div1.innerhtml = ' my skateboard shoes ', this aspect can refer to the design pattern of the observer pattern related knowledge.

The listen part of the code should actually be the following form:

Div1.listen (' song ', Function (e,params) {e.innerhtml = Params.title})

To implement this form, you have to deal with the other, and the implementation of the Customeventmanager is far from the above lines of code can be implemented, can be written by someone else's library, of course, you can also use the next one to say the second method.

Using JavaScript built-in event objects

JS In fact built a set of event implementation API, we know the event object, then is not the custom event object also implemented custom events? That's pretty much it. Look at the code first:

Div1 = document.getElementById (' Div1 '); var evt = document.createevent (' htmlevents ');//Create an Event object Evt.initevent (' Song ');//Initialize the event object with the type Songdiv1.addeventlistener (' song ', Funtion () {alert (' song ')})//div1 listen to song Event//... Omit 10,000 lines of div1.dispatchevent (EVT);//Trigger song event on Div1 object, if Div1 listens to song event then it will be handled accordingly.

This is a bit similar to the way you mimic the click event, you must specify that an event object be triggered on an element, and the system checks to see if the element is listening for this event (such as onclick= "", which is implemented in code through AddEventListener).

This kind of event model is somewhat limited, can satisfy the simple scene, it is different with the observer pattern, the detailed use way can view the manual, starts from the CreateEvent method to understand.

The benefit of using the event object I guess is that it can be combined with the OnXXX in the HTML tag.

A probe into the implementation of JS custom events