JS Event (custom event)

It's a pain in the egg today, let's talk about the event mechanism and custom events in the Web front end. Inspired by jquery, thanks to the jquery author here.

First, at the very beginning.

<button id= "button" type= "button" onclick= "alert (' Hello ')" > Hello </button>

This is the most native event triggering method when we use HTML to write pages. The above line of code will generate a button, when we click on this button will pop up a native popup window, the content is hello.

With the development of technology, we think that the event should be separated from the HTML structure, so it evolved such a way of writing.

<button id= "button" type= "button" > Hello </button><script>var button = document.getElementById ("button "); Button.onclick = function () {
Alert ("Hello");} </script>

The above code has the same effect as the first, but it implements the separation of events from HTML.

With the same principle as the above code, you can add a variety of events to various elements. such as KeyUp, mouseover and so on.

Then we have a certain understanding of the most original JS events, we will think, can we customize the event? For example, we want to trigger a save event when a button is pressed. We found that there is no save event in the native JS, how to do it, so give up?

Then we consider that the essence of the event is the passing of the message. Then we write save as a function, when we click on the button to execute the function, do not implement this custom event in disguise?

<button id= "button" type= "button" > Hello </button><script>var button = document.getElementById ("button "); Button.onclick = function () {     save ();} var save = function () {     alert ("Save");} </script>

Yes, the implementation is realized, but we think this method is very bad, and if we want to define more than one event for save, we will find that the latter event will overwrite the previous event which is quite an egg ache.

So can we do this by making the Save event an array of functions that, when triggered, triggers each function in the array so that we don't trigger multiple methods? Then if we need to add a new method to the event, just add the new item to the array.

<button id= "button" type= "button" > Hello </button><script>var button = document.getElementById ("button Button.onclick = function () {    trigger (save);} var trigger = function () {for    (var i in Save) {        save[i] ();}    } var save1 = function () {    alert ("save1");} var save2 = function () {    alert ("Save2");} var save = [save1,save2];</script>

The above code will pop up save1 and save2 in sequence. Using the same method, we can add multiple function methods to the native event. (Is it a bit similar to AddEventListener and attachevent?) ）

Look at the above code is still a bit uncomfortable, why? Because there are not the two methods mentioned above handsome ah. Ha ha.

The advantage of our approach is that we can add custom events, and the native method not only performs more efficiently than we do, but also makes it more convenient and comfortable to use.

We re-design, just said the original method than we are convenient, then we have to unify the efforts to improve convenience. As we have just mentioned in our analysis, both native events and custom events can be played through the above methods. Then let's not take care of the original or the custom.

There are a few things I can do with events, which I only think about, adding, removing, triggering, and attaching to native events. Then we can define addevent () Add event, Removeevent () Remove event, trigger () trigger event, dispatchevent () port event.

The source code is not available here, if you are interested to see the jquery source, recommended to look down version, such as 1.0.4 there is the event mechanism is the most primitive, but also the most understandable.

Addevent ()

1, need to detect the existence of an array of events, if there is no definition of an array, this array is used to hold all the methods of the event, execution 2. otherwise do 3

2. Add the event method that is mounted on the element to the array. Perform 3

3. Add the event method passed in the function parameter to the event array. Perform 4

4. Mount the function array on the band element.

Removeevent ()

1. Find the event method in the event array that you want to remove by passing in the parameters. Perform 2

2, remove the corresponding event method.

Trigger ()

1. Execute each function method in the event array sequentially.

Dispatchevent ()

1. Mount the trigger function of the event array onto the execution function of the element. Just complete the code below.

<button id= "button" type= "button" > Hello </button><script>var button = document.getElementById ("button var handler = function (type) {    //This is an event array trigger function}button.onclick = Handler (click);</script>

Write so much, or feel not cool how to do, why? If I trigger a lot of events at once, it's not easy to understand the order in which these events are executed.

Therefore, we can set a global event queue, triggering the function to trigger the event, do not directly execute the function method, but in the event queue to add a signal. The global event queue timing checks for new events (such as 100-millisecond detection, which does not actually incur much overhead.) If a new event is generated, the corresponding function method is executed. The benefit is that the user controls the order in which each event is executed (as long as the order in the event queue is adjusted), thus achieving many unexpected effects.

JS Event (custom event)