JQueryEventObject & target

Question

In an event handler I need to determine the DOM Element which got clicked. I would expect to use jqEvent.target.attributes['tag'] where jqEvent is of type JQueryEventObject. But 'target' is defined in lib.d.ts as of type EventTarget which contains nothing I can use...

Have I missed something?

Answer 1

I use this and it works fine...

    private funct(event: JQueryEventObject) {
        var state = $(event.target).prop('checked');
    }

Answer 2

Here is the definition of EventTarget (found in dom.generated.d.ts, distributed with TypeScript):

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

There could be other classes that implement EventTarget in order to attach events, so the safest API definition is to set Event.target to the object that implements EventTarget where the listeners are attached.

In the jQuery context, Event.target will almost certainly be of type HTMLElement (not type JQuery as in Andree's answer). For your example of jqEvent.target.attributes['tag'], the correct way is to notify the compiler that it is actually a Node (grandparent interface of HTMLElement), which does have the attributes property:

(<Node> jqEvent.target).attributes['tag']

The above cast could also be to HTMLElement if you are explicitly accessing properties of the more specific interface. Using the most general interface possible is considered object-oriented best practice.