JS Advanced tricks----Custom events

Custom events

The original principle of event handling: events are the main way JavaScript interacts with the browser.

An event is a design pattern called an observer.

The Observer pattern consists of two types of objects: the subject and the observer.

The subject is used to publish events;

Observers observe the subject by subscribing to these events.

The principle of custom events:

Save the event handler in an array;

When adding an event, we push in the event handler;

As we execute, we iterate through each of the event handlers in this array and execute them.

What the custom event should have:

1. an handler object that holds an array of event handlers stored in the object

Handler = {

' Click ': [Func1,func2],

' My ': [Func3,func4]

}

2. a addhandler function for adding event handler functions

3. a removehandler function to delete the event handler function

4. a fire function for executing the added function.

Note: Use prototype mode to create custom event objects.

The code is as follows:

1 functionEventtarget () {2     /*3 * Handlers: Used to store the time processing program4     */5      This. Handlers = {};6 }7Eventtarget.prototype = {8 Constructor:eventtarget,9     /*Ten * AddHandler: Event handler for registering a given type of event One * Type: Custom event type, arbitrary string A * Handler: Custom event handler function -     */ -AddHandler:function(type,handler) { the         if(typeof  This. handlers[type] = = "undefined" ){ -              This. handlers[type] = []; -         } -          This. Handlers[type].push (handler); +     }, -     /* + * Fire: Used to trigger an event A * Event: is an event object that can customize the properties it owns at     */ -Fire:function(event) { -         if( !event.target) { -Event.target = This; -         } -         if( This. Handlers[event.type]instanceofArray) { in             varHandlers = This. Handlers[event.type]; -              for(vari=0,len=handlers.length;i<len;i++ ){ to Handlers[i] (event); +             } -         } the     }, *     /* $ * RemoveHandler: Event handler for unregistering an event typePanax Notoginseng     */ -RemoveHandler:function(type,handler) { the         if( This. Handlers[type]instanceofArray) { +             varHandlers = This. Handlers[type]; A              for(vari=0,len=handlers.length;i<len;i++ ){ the                 if(Handlers[i] = =handler) { +                      Break; -                 } $             } $Handlers.splice (i,1 ); -         } -     } the}

Extension: (see http://www.zhangxinxu.com/wordpress/?p=2330 for details)

DOM Custom events: such as adding a custom event to an element.

The basic format is as follows:

var $ = function (EL) {

return new _$ (EL);

};

var _$ = function (EL) {

This.el = El;

};

_$.prototype = {

Constructor:this,

Addevent:function () {//...},

Fireevent:function () {//...},

Removeevent:function () {//...}

}

So we can use the syntax like $ (DOM). Addevent () to add an event to an element

Focus:fireEvent () method

1. for standard browsers

Eve = document.createevent (' htmlevents '): Returns the newly created event Object

Eve.initevent (eventtype,canbubble, Preventdefault): Initializing Objects

Element.dispatchevent (Eve): Triggering an event on an element

(Note: For more information about createvent () refer to:http://blog.csdn.net/jxst051665/article/details/3931598

2. for IE Browser

"PropertyChange" event, which is the event triggered by a property change

Code Address: Https://github.com/xiaoxiaojing/practiseCode/blob/master/advancedSkills/custom_event.js

Reference article: http://www.zhangxinxu.com/wordpress/?p=2330

Reference book: "JS Advanced Programming"

JS Advanced tricks----Custom events