Well, yes, React-Events and DOM-Events sometimes don't "go well" with one another, but there are clean ways to handle your use case (and most of all use cases in React, in my experience):
DOM events
The DOM methond window.addEventListener expects a DOM-EventListener (
(evt: Event): void;), so you need to use the DOM-Event interface (as you did).
Here I added some types to your code to illustrate this:
useEffect(() => {
const onScroll: EventListener = (event: Event) => { // <-- DOM-EventListener
console.log("event", event.target);
};
const win: Window = window; // <-- DOM-Window, extends DOM-EventTarget
win.addEventListener("scroll", onScroll);
return () => window.removeEventListener("scroll", onScroll);
}, []);
event.target
The event.target should be accessible.
I assume you mean that you get errors if you try to acces event.target.activeElement.
event.target.activeElement throws an error, because Event could be any event,
event.target could be any element that extends EventTarget | null,
which is no specific element, and maybe has no activeElement.
But it works despite of the TS error, because in reality it is an element that has the .activeElement.
const onScroll: EventListener = (event: Event) => {
const targetAny: EventTarget | null = event.target; // <-- maybe has no .activeElement
console.log( targetAny.activeElement );
};
If you are sure what the element is, you might type assert
the specific element:
const onScroll: EventListener = (event: Event) => {
const targetDiv: HTMLDocument = event.target as HTMLDocument; // <-- assert DOM-HTMLDocument
console.log("DOM event", targetDiv.activeElement); // <-- activeElement works
};
React events
The React-Types should be used with React-Elements.
You still would have to assert the type of event.target to access the properties of a specific element (here I use .style), because the .target of the React.SyntheticEvent (which extends React.BaseSyntheticEvent) is exactly the same DOM-EventTarget as the DOM-Event uses.
To be clear: yes, React also uses some DOM-Types, so here React "goes well" with DOM-Events.
const onScrollReact: React.EventHandler<React.UIEvent<ReactNode>> = (event: React.UIEvent<React.ReactNode> ) => {
const target: EventTarget = event.target; // <-- React uses the DOM EventTarget
const targetDiv: HTMLDivElement = target as HTMLDivElement; // <-- type assert DOM-HTMLDivElement
console.log("React event", target.style); // <-- throws TS error
console.log("React event", targetDiv.style); // <-- no TS error
};
return (<div
onScroll={ onScrollReact }
style={{ height: '400px', overflow: 'scroll' }}
>
<div style={{ height: '2000px', backgroundColor: '#eee' }}>
try scroll event
</div>
</div>);
You could alternatively use the DOM-HTMLDivElement in this example (the behavior is exactly the same, but it is more 'declarative', I guess):
const onScrollReact2: React.EventHandler<React.UIEvent<HTMLDivElement>> = (event: React.UIEvent<HTMLDivElement>) => {
console.log("React event", event.target.style); // <-- still throws TS error
};
