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.

The datagrid without event delegation

Person Id
First Name
Last Name
1JohnDoe
2KendallPublic afd
3BenRobinson
4MikeHo
5Alex1Smith
6WendySmith
7KarenWolfe
8SamanthaJones
9LindaBrady
10JenniferSmith
11BrettCarlisle
12JacobPratt
1351
1451ññ
1551ññ
1651ññ
1751ññ
1851ññ
1951ññ
2051ññ
2151ññ
2251ññ
2351ññ
2451ññ
2512
2612
27asdfasdf
28lolk
29lolk
30lolk
31lolk
32lolk
33lolk
34lolk
35lolk
364asdads
374asdads
384asdads
394asdads
404asdads
41asdasasdads
42asdasasdads
43asdasasdads
44asdasasdads
45asdasasdads

The datagrid with event delegation

Person Id
First Name
Last Name
1JohnDoe
2KendallPublic afd
3BenRobinson
4MikeHo
5Alex1Smith
6WendySmith
7KarenWolfe
8SamanthaJones
9LindaBrady
10JenniferSmith
11BrettCarlisle
12JacobPratt
1351
1451ññ
1551ññ
1651ññ
1751ññ
1851ññ
1951ññ
2051ññ
2151ññ
2251ññ
2351ññ
2451ññ
2512
2612
27asdfasdf
28lolk
29lolk
30lolk
31lolk
32lolk
33lolk
34lolk
35lolk
364asdads
374asdads
384asdads
394asdads
404asdads
41asdasasdads
42asdasasdads
43asdasasdads
44asdasasdads
45asdasasdads