JS's Custom Event

JS in the event is a big technical point JS, White is the only way to operate the DOM tree.

There are two ways to bind events:

document.getElementById ('xxx'). onclick = function () {        }

document.getElementById ("xxx"). AddEventListener ("click", function () {});

The difference between the former and the latter is nothing more than binding one and more, when the same element is bound multiple times, the former will overwrite, the latter will not overwrite.

Let's take a look at how to customize events, we want to customize events nothing but two points

1. We can bind the events we want according to our own custom events.

2. Events that we bind cannot be overwritten before each other

In summary, we can define our own function, the function implements two parameters, the first parameter is used to pass the custom event we want to bind, and the second argument is the function we want to run. But how do we achieve it without covering each other? We all know that we are directly bound to the same elements of the same event that the latter will overwrite the former, so our idea is to define an object

listener:{}

We define a listener object that will be used to add all our custom events to this object, and then when we call, we iterate over the object.

The core idea is that we take the object's key as the name of our custom event, our value must be an array, and then we push all the functions of the custom event into this array to not overwrite the time event

listener:{        'aa': [Fn1 (), fn2 (), Fn3 ()],        'bb  ': [Fn5 (), Fn6 ()]}

For example, the above example says that we have customized five custom events, with three named AA, with the following functions:

FN1 () fn2 () Fn3 ()

There are two names called B, the functions are:

Fn5 () fn6 ()

This is our core idea of implementing custom events, and let's write the push function for adding custom events

function Addevent (TYPE,FN) {if(typeof  This. listener[type] = = ='undefined'){                     This. listener[type]=[]; }                if(typeoffn = = ='function'){                     This. Listener[type].push (FN); }                return  This; }

Above this function we all add custom events We will push this custom event into our listener object to implement the custom event's predefined definition.

After we have defined this custom event, we need a function that iterates through the listener object to run the code inside to time to customize the function of the event.

The code is as follows:

  function showevent (type) { var  arr = this  .listener[type];  if   (arr instanceof Array) {for  (var  i= 0 ; I<arr.length;i++) { Span style= "color: #0000ff;" >if  (typeof  arr[i] === " function   

This allows us to run a custom event that we have defined.

Since there is a custom event, we need a function to delete the custom event, the code is as follows:

function removeevent (type, fn) {varArrayevent = This. Listener[type]; if(typeofType = = ="string"&&arrayevent instanceof Array) {                    if(typeoffn = = ="function") {                         for(varI=0, Length=arrayevent.length; i<length; i+=1){                            if(Arrayevent[i] = = =fn) {                                 This. Listener[type].splice (I,1);  Break; }                        }                    } Else{Delete This. Listener[type]; }                }                return  This; }

In this way we implement JS custom events, and we'll integrate all of our code:

varEvent ={listener:{}, Addevent:function (TYPE,FN) {if(typeof  This. listener[type] = = ='undefined'){                     This. listener[type]=[]; }                if(typeoffn = = ='function'){                     This. Listener[type].push (FN); }                return  This; }, Showevent:function (type) {vararr = This. Listener[type]; if(arr instanceof Array) { for(varI=0; i<arr.length;i++){                        if(typeofArr[i] = = ='function'{Arr[i] ({type:type}); }}}, Removeevent:function (type, fn) {varArrayevent = This. Listener[type]; if(typeofType = = ="string"&&arrayevent instanceof Array) {                    if(typeoffn = = ="function") {                         for(varI=0, Length=arrayevent.length; i<length; i+=1){                            if(Arrayevent[i] = = =fn) {                                 This. Listener[type].splice (I,1);  Break; }                        }                    } Else{Delete This. Listener[type]; }                }                return  This; }        };

After we want to customize the event we just need to call this:

Event.addevent ('aa', FN);        Event.addevent ('aa', function () {            alert (456) ;        });        Event.removeevent ('aa', FN);

JS's Custom Event