Add support for event delegation to jqLite.on

[kseamon]

In addition to querySelectorAll support in find, it would be very convenient to leverage matchesSelector in order to have event delegation (filter and is would also be useful and fairly trivial).

[benjamingr]

Care to show an "angular" use case for this?

[kseamon]

It would allow some complex ui component directives to use jqlite instead of maintaining a jQuery dependency.

In light of the dropping of IE 8 support, this would no longer require a lot of code to support.

Sent from my iPhone

On Dec 21, 2013, at 7:39 AM, benjamingr [email protected] wrote:

Care to show an "angular" use case for this?

—
Reply to this email directly or view it on GitHub.

[benjamingr]

Right, still - can you show me an example ?

Thanks.

[kseamon]

The one that first comes to mind is a data grid directive that is somewhat widely used inside of Google. It uses jQuery's event delegation to detect mouse enter and mouse leave events on each cell that would otherwise require thousands of registrations if it had to be done on a per cell basis.

There's been some discussion of refactoring angular's built-in directives (ng-click, input, etc) to use delegation as well in order to reduce startup time and save memory, but some tests we did have indicated it might not be worth the effort, as it did not make a huge difference in one of our big apps (Though it might turn out to be more valuable in other apps).

Sent from my iPhone

On Dec 21, 2013, at 9:38 AM, benjamingr [email protected] wrote:

Right, still - can you show me an example ?

Thanks.

—
Reply to this email directly or view it on GitHub.

[benjamingr]

Ok, thanks. That example seems solid.

[klebba]

+1

[quantizor]

+1

[madtimber]

+1

[soaxelbrooke]

+1

[uxder]

+1

[andrewplummer]

+1

[dance-cmdr]

+1

[orizens]

+1

[jtomaszewski]

+1

[RafalFilipek]

+1

[teabyii]

+1

[tbosch]

Links to adding querySelectorAll to jqLite: #3586 and #3598.

matches or matchesSelector is supported on all major browsers now, see http://caniuse.com/matchesselector. We would only need to handle the browser prefixes and decide whether to use matches or matchesSelector.

[tbosch]

The problem is that if we implement this we should probably also implement all the corner cases that jQuery did. E.g. for the blur event switch to focusout (see http://api.jquery.com/blur/).

@mzgol Do you know how many corner cases for event delegation there are in jQuery?

[mgol]

@mzgol Do you know how many corner cases for event delegation there are in jQuery?

There are more hooks (e.g. click handling native .click() DOM method for checkboxes) but if we restrict to delegation, apart from focus-related ones there is mouseenter/mouseleave and, since recently, pointerenter/pointerleave.

jQuery 1.x has more of them but that's not important here.

[tbosch]

@mzgol: You and @IgorMinar talked about this, that even in jQuery there are still issues coming up with event delegation, and that we probably should not do this in jQLite. Could you add some more details here and then close this issue?

[tbosch]

@mzgol ping :-)

[mgol]

I'm on holiday until Tuesday so I'll replay then.

Michał Gołębiowski

[mgol]

Maybe not so much issues as the fact that it still requires workarounds for some events (as I described in the previous comments) and for Angular users it's more "natural" to implement directives "in place" (delegated events are in fact events of ancestors that are interpreted in the context of the descendant) for better isolation etc. This and the fact that there was no noticeable performance gain for Angular prototype implementations leveraging delegated events (ng-click is only one example but for events that would fire more frequently one has to remember that delegated events save overhead when registering handlers but incur the perf. penalty when triggering them).

jQuery supports a lot of edge cases but jqLite's aim is to support most needed ones for Angular apps while keeping the size low and it doesn't seem this would be very useful in the Angular context.

@IgorMinar might be able to say more. In the meantime, I'll close the issue.

[tbosch]

Thanks!

On Wed, Aug 20, 2014 at 12:33 PM, Michał Gołębiowski <
[email protected]> wrote:

Maybe not so much issues as the fact that it still requires workarounds
for some events (as I described in the previous comments) and for Angular
users it's more "natural" to implement directives "in place" (delegated
events are in fact events of ancestors that are interpreted in the context
of the descendant) for better isolation etc. This and the fact that there
was no noticeable performance gain for Angular prototype implementations
leveraging delegated events (ng-click is only one example but for events
that would fire more frequently one has to remember that delegated events
save overhead when registering handlers but incur the perf. penalty when
triggering them).

jQuery supports a lot of edge cases but jqLite's aim is to support most
needed ones for Angular apps while keeping the size low and it doesn't seem
this would be very useful in the Angular context.

Igor might be able to say more. In the meantime, I'll close the issue.

—
Reply to this email directly or view it on GitHub
#5483 (comment).