Implementation of event triggers in javascript

Event triggers can be understood literally to trigger events, but some friends who have never used them may be confused, isn't events usually triggered by actual operations on the page? This is not entirely true because some events must be implemented by programs, such as custom events. Some custom events in the jQuery ajax framework must be implemented by event triggers. Of course, in some special cases, it is more convenient to trigger an event with an event trigger than to trigger an event with your actual operations.

For implementing event triggers, browsers support native methods, but there is a lot of difference in compatibility. This compatibility problem is completely expected, and IE has its own method, other standard browsers also have a set of methods, not to mention who is doing well or badly. For WEB developers, developing several methods is a kind of torment for developers. IE supports the fireEvent method to trigger events. The standard browser supports the dispatchEvent method to trigger events. IE9 supports both methods. The following is the source code from prototype. js (I actually copied it from situ zhengmei's blog ):

Copy codeThe Code is as follows:
Var fireEvent = function (element, event ){
If (document. createEventObject ){
// IE browser supports the fireEvent Method
Var evt = document. createEventObject ();
Return element. fireEvent ('on' + event, evt)
}
Else {
// Use the dispatchEvent method in other standard browsers
Var evt = document. createEvent ('htmlevents ');
// InitEvent accepts three parameters:
// Event type, whether to bubble up, whether to block the default browser behavior
Evt. initEvent (event, true, true );
Return! Element. dispatchEvent (evt );
}
};

The above method can be compatible with mainstream browsers to implement the event trigger function. However, some encapsulated event processing systems, such as the event module of jQuery, are not that simple and can only be implemented through simulation. I wrote a very simple event processing system before and recently met the need for custom events. So I simulated an event Trigger based on the previous Event System. The Code is as follows:
Copy codeThe Code is as follows:
/**
* Event triggers
* @ Param {Object} DOM Element
* @ Param {String/Object} event type/event Object
* @ Param {Array} additional parameters passed to the event handler
* @ Param {Boolean} whether to bubble
*/
Trigger: function (elem, event, data, isStopPropagation ){
Var type = event. type | event,
// Bubble parent element until document and window
Parent = elem. parentNode |
Elem. ownerDocument |
Elem === elem. ownerDocument & win,
EventHandler = $. data (elem, type + 'handler ');

IsStopPropagation = typeof data === 'boolean '?
Data: (isStopPropagation | false );

Data = data & isArray (data )? Data: [];

// Create a custom event object
Event = typeof event = 'object '?
Event :{
Type: type,
PreventDefault: noop,
StopPropagation: function (){
IsStopPropagation = true;
}
};

Event.tar get = elem;
Data. unshift (event );
If (eventHandler ){
EventHandler. call (elem, data );
}
// Call itself recursively to simulate bubbles
If (parent &&! IsStopPropagation ){
Data. shift ();
This. trigger (parent, event, data );
}
}

It is not difficult to simulate the principle. bind an event handler to an element. If an event is triggered, the corresponding event handler will be executed, to achieve the event trigger function, you only need to obtain the corresponding event processing function and then execute it. This is the most basic.

When an actual event occurs, the browser generates an event object, which contains the attributes and information of the event. If no actual event occurs, there is no such event object, so the above Code also creates an event object to meet the most basic functions.

There is also event bubbling. If no actual event occurs, there will naturally be No bubbling behavior. If you want to simulate the bubbling function, it is necessary to constantly search for the parent element and check whether events of the same type are bound until the document and window ends. If the structure is complex, the performance estimation of this recursive call method is not very good.

Finally, it is the default behavior of the browser. I think it is quite troublesome to simulate this, so I don't know how to implement it. For example, the default jump of the tag, I tested jQuery trigger and didn't implement it either, however, some other behaviors seem to be introduced in the API manual. After all, this function is not very important, and we have not done much research at the moment.