I have a click event on an Angular ponent:

import { Component } from "@angular/core";

@Component({
  template: `
    <hello (click)="onClick($event)"></hello>
  `
})
export class AppComponent {
  onClick(e) {
    alert("Click on TAG: " + e.target.tagName);
  }
}

See demo online: ponent.ts

Why is event.target an inner element of the ponent and not the ponent itself?

I have a click event on an Angular ponent:

import { Component } from "@angular/core";

@Component({
  template: `
    <hello (click)="onClick($event)"></hello>
  `
})
export class AppComponent {
  onClick(e) {
    alert("Click on TAG: " + e.target.tagName);
  }
}

See demo online: https://stackblitz./edit/angular-ivy-zxmsnc?file=src%2Fapp%2Fapp.ponent.ts

Why is event.target an inner element of the ponent and not the ponent itself?

• javascript
• angular

1 Answer 1

That's because event.target refers to the element that triggered the event.

I think you're looking for event.currentTarget which refers to the element that the event listener is attached to.