Complete Guide to Getting Clicked Element ID in Angular 2

Event Object Property Analysis

When handling click events in Angular 2 applications, developers often need to identify the specific element that was clicked. The event object provides multiple properties to access the target element, but the behavior of these properties may vary across different browsers and scenarios.

Core Solution

By combining the use of event.target, event.srcElement, and event.currentTarget properties, you can ensure reliable access to element IDs in various environments. Here is the complete implementation code:

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onClick($event)" id="test">Click</button>
  `
})
export class AppComponent {
  onClick(event) {
    var target = event.target || event.srcElement || event.currentTarget;
    var idAttr = target.attributes.id;
    var value = idAttr.nodeValue;
    console.log('Element ID:', value);
  }
}

Property Comparison Analysis

event.target points to the element that actually triggered the event and remains unchanged during event bubbling. event.currentTarget points to the element currently handling the event, which is particularly useful in event delegation scenarios. event.srcElement is a legacy property from IE browsers and is typically the same as target in modern browsers.

TypeScript Optimized Version

For TypeScript projects, you can use type assertions for better type safety:

toggle(event: Event): void {
    let elementId: string = (event.target as Element).id;
    // Perform subsequent operations with the ID
}

Practical Application Scenarios

When working with third-party UI libraries like Material Design Lite, the event target might be an internal element rather than the button itself. In such cases, currentTarget usually provides more reliable results because it points to the element where the event handler is bound.

Browser Compatibility Considerations

To ensure cross-browser compatibility, it's recommended to adopt a chained property access strategy. Modern browsers primarily use the target property, while older IE browsers require srcElement.

Best Practice Recommendations

In complex UI components, it's advisable to combine event delegation with element identification, avoiding binding event handlers individually for each child element. By checking element IDs or custom data attributes, you can implement more efficient event handling logic.