EventListener interface does not accept objects with a handleEvent method

[sccolbert]

Issue from the old tracker:
https://typescript.codeplex.com/workitem/45

EventTarget.addEventListener accepts a function or an object implementing EventListener:
https://developer.mozilla.org/en-US/docs/Web/API/EventListener

[saschanaz]

http://www.w3.org/TR/DOM-Level-3-Events/#widl-EventListener-handleEvent

In JavaScript, user-defined functions are considered to implement the EventListener interface. Thus the event object will be provided as the first parameter to the user-defined function when it is invoked. Additionally, JavaScript objects can also implement the EventListener interface when they define a handleEvent method.

I think EventListener interface should be changed to:

interface EventListener {
  handleEvent(evt: Event): void;
}

// OR

type EventListener = { handleEvent(evt: Event): void } | Function;

and EventTarget interface should be changed to:

interface EventTarget {
    removeEventListener(type: string, listener: Function|EventListener, useCapture?: boolean): void;
    addEventListener(type: string, listener: Function|EventListener, useCapture?: boolean): void;
    dispatchEvent(evt: Event): boolean;
}

I also think #299 is somewhat related.

[LPGhatguy]

@mhegazy how was this ticket resolved? I hit this issue today when removeElementListener wasn't accepting a Function argument in TypeScript 1.6.

[mhegazy]

here is what we have in lib.d.ts today:

interface EventListener {
    (evt: Event): void;
}

interface EventListenerObject {
    handleEvent(evt: Event): void;
}

declare type EventListenerOrEventListenerObject = EventListener | EventListenerObject;

interface EventTarget {
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
    dispatchEvent(evt: Event): boolean;
    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}

this means that the assigning anything with a call signature works:

var e: EventTarget;
var f: () => void;
e.addEventListener("e", f);
e.removeEventListener("e", f);

the issue is that Function is not assignable to an object with call signature, as we do not know its parameter nor return types. so this does not work:

var e: EventTarget;
var f: Function;
e.addEventListener("e", f); // error
e.removeEventListener("e", f); // error

which is similar to:

var f1: () => void;
var f2: Function;

f1 = f2; // Error
f2 = f1; // OK

Now the question is do we need the Function type to be supported? i think what we have now provides for greater type safety.

[birtles]

It would be neat if the following worked:

const styleSheetLoad = (link: HTMLLinkElement): Promise<void> =>
  new Promise(resolve => {
    link.addEventListener('load', resolve);
  });

Instead I get:

error TS2345: Argument of type '(value?: void | PromiseLike<void>) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.
  Type '(value?: void | PromiseLike<void>) => void' is not assignable to type 'EventListenerObject'.
    Property 'handleEvent' is missing in type '(value?: void | PromiseLike<void>) => void'.

But perhaps I'm just doing it wrong.