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.
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!
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加