Event delegation on items in long lists


#1

Render a list like such, pretty common

<ion-list>
  <ion-item *ngFor="let item of items" (click)="handleItemClick($event)">
     {{item.title}}
  </ion-item>
</ion-list>

Though it looks pretty inefficient, especially the list goes very long. My question is that is event delegation possible in this case with Angular 2 and ionic 2? If so, how?

I’m aware of Virtual Scroll, which changes the rendering itself so that’s not particularly to the topic. Although the incentive doing event delegation is still relevant.

Thanks.


#2

Could you explain a bit more about what you’re asking?
Im a bit lost as to what the question is.


#3

What I meant was if there’s a way not to bind a (click) handler on each ion-item. Instead doing something like what can be done in jQuery:

$.on('click', 'element', fn)

of course within the context of ionic 2 and angular 2. Thanks.


#4

There are ways, using custom component and host bindings.
But the recommended way is using (click).