jquery Custom Events

In JS, the notification of the message is expressed through the event, when the code base grows to a certain scale will need to consider the behavior and custom events to decouple, through the event mechanism can be designed as a stand-alone module, through the event external communication to improve the program's development efficiency.

Understanding the concept of custom events:

1. Dom-like behavior: You listen on a DOM node (including a Document object) and trigger a custom event. These events can be either bubbling or intercepted. That's what Prototype, JQuery and MooTools do. If the event is not diffused, it must be monitored on the object that triggered the event.
2. Namespaces: Some frameworks require you to specify namespaces for events, usually using a dot prefix to separate your events from the native event areas.
3. Custom Extra Data: The JAVASCRIPT framework allows you to send additional data to the event handler when triggering a custom event. JQuery can pass any number of additional parameters to the event handler.
4. Generic Event API: Only Dojo retains the normal API for manipulating native DOM events. The Operation customization event requires a special publish/subscribe API. This also means that custom events in Dojo do not have some behavior (such as bubbling) of DOM events.
5. Disclaimer: We often need to add some special changes to the predefined events (for example, click events that require the ALT key to be pressed to trigger) and MooTools to run the custom events you define. Such events require a prior declaration, even if you simply declare their names. Any custom events that are not declared are not triggered.

The theory is too abstract to see how events are used in the JQuery framework.

The event custom event for JQuery is also bound by on, and then triggered by trigger.

To bind the element Hello event
element.bind ("Hello", function () {
    alert ("Hello world!");
});
Trigger Hello event
element.trigger ("Hello");

This code does not seem to feel the benefits of this, look at the following example you may understand the benefits of using custom events, reference to the right side of the code.

trigger issues to be addressed

1. Simulate event objects, user impersonation handles stop event bubbling (because it is not triggered by the browser system, it is triggered automatically, so what does this event object do?) )
2. Distinguishes event types, triggering standard browser events and handlers for custom event name bindings.

Quasi-bubbling mechanism

1. When the event is the click Type, nature is itself to support bubbling such behavior, through stoppropagation blocking can
2. Of course some of the events, such as Focusin and Blur itself, are not bubbling, but jquery needs to simulate bubbling behavior on these events for Cross-browser consistency, how does jquery handle it?
3. So what if it's a custom AAA event name, and how do you handle bubbling?

<ul id= "Tabs" >

    <li data-tab= "users" >Users</li>     <li data-tab= "groups" >Groups</li> </ul> <div id= "tabscontent" >     <div data-tab= "users" >part1</div>     < div data-tab= "groups" >part2</div> </div>     <script type= "Text/javascript" >     $.fn.tabs = function (control) {var element = $ (this); var control = $ (control);   element.delegate ("Li", "CLI CK ", function () {var tabname = $ (this). attr (" Data-tab ");//Click on Li to trigger Change.tabs custom event   Element.trigger (" Change.tabs ", tabname); });  //Bind a Change.tabs custom event Element.bind ("Change.tabs", Function (E, tabname) {element.find ("Li") to the element. Removeclass ("active"); Element.find (">[data-tab= '" + tabname + "']"). AddClass ("active"); }); Element.bind ("Change.tabs", Function (E, tabname) {Control.find (">[data-tab]"). Removeclass ("active"); Control.find (">[data-tab= '" + tabname + "']"). AddClass ("active"); });   Activate first tab   var firstName = Element.find ("Li:first"). attr ("Data-tab");   Element.trigger ("Change.tabs", firstName);   return this; };     $ ("Ul#tabs"). Tabs ("#tabsContent");       </script>