javascript - Event delegation in Angular2 -

i'm developing app in ng2 , i'm struggling something. i'm building calendar can pick date-range , need react on click & mouseenter/mouseleave events on day cells. have code (simplified) this:

calendar.component.html

<month>     <day *ngfor="let day of days" (click)="handleclick()"           (mouseenter)="handlemouseenter()"           (mouseleave)="handlemouseleave()"           [innerhtml]="day"></day> </month> 

but gives me hundreds of separate event listeners in browser's memory (each day's cell gets 3 event listeners, , can have 12 months displayed @ time on 1k of listeners).

so wanted "the proper way", using method called "event delegation". mean, attach click event on parent component (month) , when receives click event, check whether occurred on day component - , react click. jquery in it's on() method when pass selector parameter.

but doing referencing dom elements natively in handler's code:

month.component.ts

private handleclick(event) {     if (event.target.tagname === 'day') {         // handle day click     } else {         // handle other cases     } } 

and colleagues rejected idea, since - said - "there must simpler, proper way of handling in ng2; there in jquery. besides, it's getting out of control here - you're reacting day's clicks in month's code."

so, question is, there better way? or trying solve problem shouldn't bother solving anymore, since users' devices more , more memory/processing power everyday?

thanks in advance!