Event Delegation
Event delegation is the process of binding actions to parent elements that trigger based on events
that occur to child elements. Most javascript events bubble up through the html hierarchy and can be
detected by parent objects, provided child objects don't prevent bubbling.
Event delection is useful in QCubed for the following reasons:
- If you have many repeating objects, it can reduce the amount of JavaScript code that is sent to the browser.
By binding an action to the parent, only one event need be detected, rather that separate events for
each repeating object. Most of the time, your users will not notice a difference, but if you have a large
number of repeating objects, this can make your web page more responsive.
- You can detect events coming from objects that are not initially in the form.
That means that the delegation also works for child elements that get
inserted into the parent element after the event/action was bound (delegated)
to the parent.
To create an event handler that is looking for bubbled events, you pass a 3rd parameter to any EventBase
event detector class. This string is a JQuery selector,
which is similar to a css selector, and acts as a kind of filter, specifying what types of html objects we
will be listening to.
Event delegation is automatically used by some aspects of QCubed. For example, the Proxy
control uses event delegation to respond to proxied buttons and links by attaching an event handler to the
form that is listening for bubbled events directed toward proxied controls.
The following code renders 2 DataGrid tables that have an Edit button. The first data grid,
called "dtgPersons", adds an edit button to every row, creating a new Button object each time and attaching
a separate click event handler to each button. The second grid, called dtgPersonsDelegated, draws html for a
button on each row, with a "data-id" attribute that is the record id. It also has a single action handler that
looks for clicks on buttons inside itself that have a "data-id" attribute, and passes this value to the action handler.
The result is the same, but the second version generates much less javascript.
All Events can take a 3rd parameter which indicates it will use event delegation. There is also
the On that allows you to specify any kind of javascript event to listen to.