Implementation of javascript event trigger introduction_javascript skills

Event triggers can be well understood literally, they are used to trigger events, but some friends who have never used them may be confused. Events are not usually triggered by the user's actual operations on the page. Of? This view is not completely correct, because some events must be implemented by programs, such as custom events. 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 through actual user operations.

Browsers have native methods to support event triggers, but there are big differences in compatibility. This compatibility problem is completely expected. IE has its own methods, and others Standard browsers also have a set of methods. Regardless of whose method is good or bad, for WEB developers, coming up with several sets of methods is a kind of torture for developers. IE supports the fireEvent method to implement event triggering, and standard browsers support dispatchEvent to implement event triggering. The duplicitous IE9 supports both. The following is the source code from prototype.js (actually I copied it from Situ Zhengmei’s blog):

Copy code The code 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 to bubble, whether to prevent the browser's default behavior
evt.initEvent(event, true, true);
return !element.dispatchEvent(evt);
}
};

The above method is compatible with mainstream browsers to implement event trigger functions. But for some encapsulated event processing systems, such as jQuery's event module, it is not that simple and can only be implemented through simulation. I have written 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. The code is as follows:

Copy code The code is as follows:

/**
* Event trigger
* @param { Object } DOM element
* @param { String / Object } Event type/event object
* @param { Array } Additional information passed to the event handling function Parameter
* @param { Boolean } Whether to bubble
*/
trigger: function( elem, event, data , isStopPropagation ){
var type = event.type || event,
// Bubbled 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 );
}
// Call itself recursively to simulate bubbling
if( parent && !isStopPropagation ){
data.shift();
this.trigger( parent, event, data );
}
}

The principle of simulation is not difficult. Bind an event processing function to an element. If there is an actual operation that triggers the event, the corresponding event processing function will be executed. Therefore, to achieve the function of the event trigger, you only need to obtain The corresponding event handling function is then executed, which 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 no actual event occurs, there will be no 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. So if you want to simulate the bubbling function, you must constantly search for the parent element and check whether the same type is bound. events until the document and window are reached. If the structure is complex, the performance of this recursive calling method is estimated to be poor.

The last one is the default behavior of the browser. I think it is quite troublesome to simulate. It is so troublesome that I don’t know how to implement it. For example, the default jump of the a tag. I tested jQuery’s trigger and it did not implement it, but some other The behavior seems to be introduced in the API manual. After all, this function is not very important, and I haven’t done too much research yet.