Add correct this type for event handlers (#2166)

src/jsx.d.ts

@@ -346,7 +346,11 @@ export namespace JSXInternal {
 	>;
 
 	interface EventHandler<E extends TargetedEvent> {
-		(event: E): void;
+		/**
+		 * The `this` keyword always points to the DOM element the event handler
+		 * was invoked on. See: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers#Event_handlers_parameters_this_binding_and_the_return_value
+		 */
+		(this: E['currentTarget'], event: E): void;
 	}
 
 	type AnimationEventHandler<Target extends EventTarget> = EventHandler<
@@ -415,7 +419,7 @@ export namespace JSXInternal {
 
 		// Details Events
 		onToggle?: GenericEventHandler<Target>;
-		
+
 		// Focus Events
 		onFocus?: FocusEventHandler<Target>;
 		onFocusCapture?: FocusEventHandler<Target>;

test/ts/Component-test.tsx

@@ -7,6 +7,12 @@ import {
 	Fragment
 } from '../../src/';
 
+// Test `this` binding on event handlers
+function onHandler(this: HTMLInputElement, event: any) {
+	return this.value;
+}
+const foo = <input onChange={onHandler} />;
+
 export class ContextComponent extends Component<{ foo: string }> {
 	getChildContext() {
 		return { something: 2 };