CODEWITHSUNDEEP
htmltypescriptdom
CodeMan03
CodeMan03

Reputation: 226

How to search an Event to get the name of an Element?

Lets say I have a clipboard paste event inside my component like below. 

window.addEventListener('paste', this.insertNewRowsBeforePaste.bind(this));

Then when I hit the ctrl + V on my keyboard it calls this event which is a ClipboardEvent

insertNewRowsBeforePaste(event) {   
const tabName = // <---- I need to be able to see which tab the user has clicked on then I can do other processing based on the current tab.
}

So I'm expecting it to say tabName = 'Tab 1' or 'Tab 2' etc since my component is a tab control with multiple tabs.

Upvotes: 0

Views: 69

Answers (1)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38807

EventTarget event.target will provide the HTMLElement that triggered the event. You can then target the name property on elements such as <button>, <input>, and <a>. You also have access to additional properties such as innerHTML and textContent to check against.

insertNewRowsBeforePaste(event) {   
    const target = event.target;
    const name = target.name; 

    console.log(name);

    if (name.indexOf('Tab 1') > -1) { console.log('Tab 1'); }
}

Here is an example using event.target of a clicked elements to access their respective name, innerHTML and textContent property values.

If you are doing this in TypeScript, you will need to use casting/type-assertion on the target to access HTMLButtonElement | HTMLInputElement | HTMLAnchorElement properties such as name:

insertNewRowsBeforePaste(event) {
    const target = event.target as HTMLButtonElement;
    const name = target.name;

    // or
    // const name = (<HTMLButtonElement> event.target).name;

    // or
    // const target = event.target as HTMLButtonElement;
    // const { name } = target;        
}

Hopefully that helps!

Upvotes: 1

Related Questions