Event triggers can be well understood literally, and are used to trigger events, but some friends who have not used them may be confused. Are events usually triggered by the actual operations of users on the page? This view is not completely correct, because some events must be implemented by programs, such as custom events, and some custom events of jQuery's ajax framework must be implemented by event triggers. Of course, in some special cases, it is more convenient to use event triggers to trigger events than to trigger events by the user's actual operations.
The browser has native methods to support the implementation of event triggers, but there are big differences in compatibility. This compatibility issue is completely expected. IE has its own methods, and other standard browsers also have a set of methods. Not to mention whose methods are good or bad, for WEB developers, it is a torture for developers to develop several methods. IE supports fireEvent method to implement event triggering, standard browsers support dispatchEvent to implement event triggering, and both support IE9. The following is the source code from prototype.js (actually I copied it from Situ Zhengmei's blog):
The code copy is as follows:
var fireEvent = function(element,event){
if (document.createEventObject){
// IE browser supports fireEvent method
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
}
else{
// Other standard browsers use the dispatchEvent method
var evt = document.createEvent( 'HTMLEvents' );
// initEvent accepts 3 parameters:
// Event type, whether it is bubbling, whether it is blocking the browser's default behavior
evt.initEvent(event, true, true);
return !element.dispatchEvent(evt);
}
};
The above method is compatible with mainstream browsers to implement the function of event triggers. However, for some encapsulated event processing systems, such as the event module of jQuery, it is not that simple, and can only be implemented through simulation. I wrote a very simple event processing system before, and recently encountered the need for custom events, so I simulated an event trigger based on the previous event system, and the code is as follows:
The code copy is as follows:
/**
* Event trigger
* @param { Object } DOM Element
* @param { String / Object } Event Type/event Object
* @param { Array } Additional parameters passed to event handler function
* @param { Boolean } Is it bubbling
*/
trigger : function( elem, event, data, isStopPropagation ){
var type = event.type || event,
// Bubble parent element, all the way to document, 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.target = elem;
data.unshift( event );
if( eventHandler ){
eventHandler.call( elem, data );
}
// Recursively call itself to simulate bubbles
if( parent && !isStopPropagation ){
data.shift();
this.trigger( parent, event, data );
}
}
The principle of simulation is not difficult. Bind an event handling function to a certain element. If there is an actual operation of triggering an event, the corresponding event handling function will be executed. Therefore, to achieve the function of the event trigger, just obtain the corresponding event handling function and execute it. This is the most basic.
When the actual event occurs, the browser will generate an event object, which contains some attributes and information when the event occurs. If there is no actual event, there is no event object, so the above code also creates an event object to satisfy the most basic functions.
There are also events that bubble. If no actual events occur, there will naturally be no bubble behavior. Then if you want to simulate the bubble function, you must constantly look up the parent element and check whether the same type of event is bound until the document and window. If the structure is complex, the performance of this recursive call method is estimated to be not very good.
Finally, there is the default behavior of the browser. I think it is quite troublesome to simulate this, so troublesome that I don’t know how to implement it. For example, the default jump of the a tag. I tested the trigger of jQuery, but it was not implemented, but some other behaviors seem to be introduced in the API manual. After all, this function is not very important, and I haven't done much in-depth research yet.