Introduction to JavaScript event triggers implementation _javascript techniques

Source: Internet
Author: User
Tags api manual

Event triggers can be interpreted literally to trigger events, but some friends who are not used may be confused, and are events not usually triggered by the user's actual actions on the page? This is not entirely true because some events must be implemented by programs, such as custom events, and some custom events for the AJAX framework of jquery must be implemented by event triggers. Of course, in some special cases, it is more convenient to use event triggers to trigger events than the actual actions of the user to trigger events.

For the implementation of event triggers, browsers have native methods to support, but there is a great discrepancy in compatibility, the compatibility of the problem is completely expected, IE has its own methods, other standard browsers have a set of methods, do not say whose method is good and bad, A few sets of methods for Web developers are a torment for developers. IE supports fireevent methods to implement event triggers, and standard browsers support dispatchevent to implement event triggers, and two-faced IE9 are both supported. Here is the source code from Prototype.js (I actually copied it from Masaki's blog):

Copy Code code as follows:

var fireEvent = function (element,event) {
if (document.createeventobject) {
IE browser support 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, bubbling, blocking browser default behavior
Evt.initevent (event, True, true);
Return!element.dispatchevent (EVT);
}
};

The above method can be compatible with the mainstream browser to implement the function of event triggers. But for some packaged event-handling systems, such as jquery's event module, it's not so simple, it can only be done by simulation. I've written a very simple event-handling system before, and recently encountered the need for custom events, so I simulated an event trigger on the basis of a previous event system, and the code was as follows:

Copy Code code as follows:

/**
* Event triggers
* @param {Object} DOM element
* @param {String/object} Events type/Event object
* @param {Array} additional parameters passed to the event handler function
* @param {Boolean} is bubbling
*/
Trigger:function (Elem, event, data, isstoppropagation) {
var type = Event.type | | Event
Bubbling parent element, all the time 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 invokes itself to simulate bubbling
if (parent &&!isstoppropagation) {
Data.shift ();
This.trigger (parent, event, data);
}
}


Simulation of the principle is not difficult to bind an element to an event handler, if there is a trigger event in the actual operation of the corresponding event handler function, so to achieve the function of the event trigger as long as the corresponding event handler to get the appropriate function and then execution is almost, this is the most basic.

When the actual event occurs, the browser generates an event object that contains the properties and information of the event when it occurs. The above code also creates an event object that satisfies the most basic functionality, if there is no actual event happening that is not the event object.

There is also event bubbling, if there is no actual event occurred, there will be no bubbling behavior, then if you want to simulate the bubbling function, you must constantly look up the parent element and check whether the same type of events are bound until the document and window, if the structure is complex, This recursive invocation of the method performance estimate will not be good.

Finally is the browser's default behavior, I think this to simulate quite troublesome, trouble to do not know how to implement, such as a label default jump, I tested jquery trigger, also did not implement, but some other behavior seems to be introduced in the API manual. After all, this function is not very important, temporarily did not do too much scrutiny.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.