There are several variations between the jQuery and W3C flavors of UI Capture.

Change event

In legacy Internet Explorer, the change event does not bubble. However, jQuery normalizes this behavior and causes the change to bubble on all versions of Internet Explorer. Therefore, when using the jQuery flavor, the change event listener does not need to be configured to attach to individual elements.

For the same reason, on pages with frames or iframes, the change event cannot be tracked on elements contained within these frame elements (in legacy Internet Explorer) when using the W3C flavor of UI Capture. A workaround for this type of situation is to include the W3C flavor of the UI Capture library in the frame page itself.

Event delegation support in the jQuery flavor of UI Capture

The jQuery flavor of the UI Capture supports delegate targets as implemented by the jQuery library. This is not supported by the W3C flavor.

Specifying a delegate target works for the events that bubble from the innermost element in the document where they occur all the way up to the body and the document element. In Internet Explorer 8 and lower, a few events such as change and submit do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior.

To use event delegation, the delegateTarget property should be added to the event entry as follows.

{ name: "change", delegateTarget: "document", target: "input.selected" }

The delegateTarget points to the document or a selector that resolves to a single target element. The event is not registered when it occurs directly on the delegate target element, but only for descendants (inner elements) that match the target selector.

For example, consider the following markup.

<div id="container">
		<input id="x" type="text" />
    <input id="y" type="text" />
    <input id="z" type="text" />
</div>

Without event delegation, you would have to specify the focus and blur event handlers as follows.

{ name: "focus", target: "input" }
{ name: "blur",  target: "input" }

This results in event handlers being attached to each input element. With event delegation, one can specify the same as the following.

{ name: "focusin",  delegateTarget: "#container", target: "input" }
{ name: "focusout", delegateTarget: "#container", target: "input" }

This would result in attaching a single event handler to the delegateTarget element, which is the container div.

Note: Since focus & blur do not bubble, they need to be replaced with focusin and focusout, which are synthetic events that are provided by jQuery that do bubble.

As another example, consider the following markup.

<div id="menu">
    <a id="item1" href="#item1">Item 1</a>
    <a id="item2" href="#item2">Item 2</a>
    <a id="item3" href="#item3">Item 3</a>
    <a id="item4" href="#item4">Item 4</a>
    <a id="item5" href="#item5">Item 5</a>
</div>

To monitor mouseover events on the menu items one could specify the following configuration.

{ name: "mouseover", target: "div#menu > a" }

This would attach an event handler to each menu item. With event delegation, one can achieve a similar result by specifying the following.

{ name: "mouseover", delegateTarget: "#menu", target: "a" }

This would attach a single event handler to the delegateTarget element, which is the div.

Delegated events have the advantage that they can process events from descendant elements that are added to the document later. By picking an element that is guaranteed to be present at the time the delegated event handler is attached. You can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document.

In addition to their ability to handle events on descendant elements that are not yet created, another advantage of delegated events is their potential for much lower overhead when many elements must be monitored. On a data table with thousands of elements, a delegated-events approach attaches an event handler to only one element, the container, and the event only needs to bubble up one or two levels at the most. This results in improved performance.


Join The Discussion

Your email address will not be published. Required fields are marked *