# Class Event<TData>

The class representing a widget event (aka., a ZK event). A widget event is the widget-level event that a widget can fire and the client application can listen.

On the other hand, a DOM event (jq.Event) is the low-level event related to DOM elements. It is usually listened by the implementation of a widget, rather than the client application.

In additions, zWatch is an utility to manage the system-level events, and both the client application and the widget implementation might listen.

To fire a widget event, use zk.Widget#fire. To listen a widget event, use zk.Widget#listen.

See Also

- AU Requests
- AU Responses
- Notifications
*

Common Key Codes:

BACKSSPACE | 8 | TAB | 9 | ENTER | 13 | SHIFT | 16 | CTRL | 17
ALT | 18 | ESC | 27 | PGUP | 33 | PGDN | 34 | END | 35
HOME | 36 | LEFT | 37 | UP | 38 | RIGHT | 39 | DOWN | 40
INS | 45 | DEL | 46 | F1 | 112

#### Type Parameters

- #### TData = unknown

#### Hierarchy (view full)

- Object
  - Event

#####
Index

### Constructors

constructor

### Properties

$oid
altKey
auStopped
charCode?
contextSelected?
ctrlKey
currentTarget?
data?
domEvent?
domStopped
domTarget
itemSelected?
key
keyCode
keys?
metaKey
name
opts
pageX
pageY
shallStop
shiftKey
stopped
target
tooltipped?
which
$oid

### Accessors

$class

### Methods

$init
$instanceof
$super
$supers
addOptions
afterCreated_
afterInit
get$Class
isPressed
proxy
stop
isAssignableFrom
isInstance

## Constructors

### constructor

- new Event<TData>(target, name, data?, opts?, domEvent?): Event<TData>

- #### Type Parameters

  - #### TData = unknown

  #### Parameters

  - ##### target: undefined | Widget<HTMLElement>

    the target widget.

  - ##### name: string

    the event name, such as onClick

  - ##### `Optional` data: TData

    the data depending on the event.

  - ##### `Optional` opts: EventOptions

    the options. Refer to opts

  - ##### `Optional` domEvent: TriggeredEvent<any, any, any, any>

    the DOM event that causes this widget event.

  #### Returns Event<TData>

  Overrides zk.Object.constructor

## Properties

### $oid

$oid: number = 0

The object ID. Each object has its own unique $oid. It is mainly used for debugging purpose.

Trick: you can test if a JavaScript object is a ZK object by examining this property, such as `if (o.$oid) alert('o is a ZK object');`

Notice: zk.Class extends from zk.Object (so a class also has $oid)

Inherited from zk.Object.$oid

### altKey

altKey: any

### auStopped

auStopped: boolean = false

Indicates whether to stop the sending of the AU request to the server.

#### See

- Event.stop
- stopped
- domStopped

### `Optional` charCode

charCode?: number

### `Optional` contextSelected

contextSelected?: boolean

### ctrlKey

ctrlKey: any

### `Optional` currentTarget

currentTarget?: Widget<HTMLElement>

Indicates the target which is handling this event.

By default, an event will be propagated to its parent, and this member tells which widget is handling it, while #target is the widget that the event is targeting.

#### See

target

### `Optional` data

data?: TData

The data which depends on the event. Here is the list of Event Data.

Data can be any javascript Object. You can bring Number, String or JSON object to server side with it.

The javascript JSON object will be transfered to org.zkoss.json.JSONObject at server side as the following: ```ts // at client side var json = { "aa" : [{"a11":"11", "a12":12},{"a21":"21","a22":22.2}], "bb":[{"b11":"31","b12":"32"},{"b21":"41","b22":"42","b23":43}] }, data = {jsonObject:json};

// at server side final JSONObject jsonObject = (JSONObject)data.get("jsonObject"); // get JSONObject // will output "22.2" System.out.println(((JSONObject)((JSONArray)jsonObject.get("aa")).get(1)).get("a22")); // will output "class java.lang.Double" System.out.println(((JSONObject)((JSONArray)jsonObject.get("aa")).get(1)).get("a22").getClass());

    <p>However, if data is an instance of Map, its content is copied to the event instance. Thus, you can access them directly with the event instance as follows.
    ```ts
    onClick: function (evt) {
      if (evt.altKey) { //it is the same as evt.data.altKey
      }
    }

Refer to ZK Client-side Reference: AU Requests: Server-side Processing.

### `Optional` domEvent

domEvent?: TriggeredEvent<any, any, any, any>

The DOM event that causes this widget event, or null if not available.

### domStopped

domStopped: boolean = false

Indicates whether to stop the native DOM event.

#### See

- Event.stop
- stopped
- auStopped

### domTarget

domTarget: HTMLElement

The DOM element that the event is targeting, or null if not available.

### `Optional` itemSelected

itemSelected?: boolean

### key

key: string

### keyCode

keyCode: number

### `Optional` keys

keys?: Dimension

### metaKey

metaKey: boolean

### name

name: string

The event name, such as 'onChange'. The data which depends on the event. Here is the list of Event Data.

However, if data is an instance of Map, its content is copied to the event instance. Thus, you can access them directly with the event instance as follows. ```ts onClick: function (evt) { if (evt.altKey) { //it is the same as evt.data.altKey } } ```

### opts

opts: EventOptions

The options (never null).

Allowed properties:

- implicit: whether this event is an implicit event, i.e., whether it is implicit to users (so no progressing bar).
- ignorable: whether this event is ignorable, i.e., whether to ignore any error of sending this event back the server.
  - An ignorable event is also an imiplicit event.
- toServer: whether to send this event to the server. If specified, it is always sent no matter the widget is created at the server or not.
- uri: the URI to send the Ajax request to. If not specified, zAu#comURI is used (i.e., the desktop's update URI is used). If specified, the URI specified in this option is used -- notice that there is no encoding at all, so make sure it is correct.
- rtags (since 5.0.2): a map (Map) that can be anything and will be passed to the `onResponse` watch (see also _global_.zWatch).

### pageX

pageX: number

### pageY

pageY: number

### shallStop

shallStop: boolean = false

### shiftKey

shiftKey: boolean

### stopped

stopped: boolean = false

Indicates whether the event propagation is stopped.

#### See

- Event.stop
- auStopped
- domStopped

### target

target: Widget<HTMLElement>

The target widget (readonly).

#### See

currentTarget

### `Optional` tooltipped

tooltipped?: boolean

### which

which: number

### `Static` $oid

$oid: any

Inherited from zk.Object.$oid

## Accessors

### $class

- get $class(): typeof ZKObject

- The class that this object belongs to.

  #### Returns typeof ZKObject

  Inherited from zk.Object.$class

## Methods

### $init

- $init(props?): void

- The constructor.

  #### Parameters

  - ##### `Optional` props: Record<string, unknown> | (() => void)

  #### Returns void

  #### Default Value

      it does nothing so the subclass needs not to copy back
      (also harmless to call back).

  #### See

  afterInit

  #### Deprecated

  as of 10.0 released. Using ES6 `constructor` instead.

  Inherited from zk.Object.$init

### $instanceof

- $instanceof(...klass): boolean

- Determines if this object is an instance of the class represented by the specified Class parameter. Example:

      if (obj.$instanceof(zul.wgt.Label, zul.wgt.Image)) {
      }

  #### Parameters

  - ##### `Rest` ...klass: any[]

    the Class object to be checked. Any number of arguments can be specified.

  #### Returns boolean

  true if this object is an instance of the class

  Inherited from zk.Object.$instanceof

### $super

- $super<M, F>(mtd, ...args): ReturnType<F>

- Invokes a method defined in the superclass with any number of arguments. It is like Function's call() that takes any number of arguments.

  Example: ```ts multiply: function (n) { return this.$super('multiply', n + 2); } ```

  #### Type Parameters

  - #### M extends "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "stop" | "data" | "keys" | "itemSelected" | "tooltipped" | "contextSelected" | "which" | "metaKey" | "ctrlKey" | "altKey" | "shiftKey" | "pageX" | "pageY" | "key" | "keyCode" | "charCode" | "shallStop" | "target" | "currentTarget" | "name" | "opts" | "domEvent" | "domTarget" | "stopped" | "auStopped" | "domStopped" | "addOptions" | "isPressed"

  - #### F extends any

  #### Parameters

  - ##### mtd: M

    the method name to invoke

  - ##### `Rest` ...args: Parameters<F>

    any number of arguments

  #### Returns ReturnType<F>

  the object being returned by the method of the superclass.

  #### See

  zk.Object.$supers

  Inherited from zk.Object.$super

- $super<M, F>(klass, mtd, ...args): ReturnType<F>

- Invokes a method defined in the superclass with any number of arguments. It is like Function's call() that takes any number of arguments.

  It is similar to ZKObject.$super, but this method works even if the superclass calls back the same member method. In short, it is tedious but safer.

  Example: ```ts foo.MyClass = zk.$extends(foo.MySuper, { multiply: function (n) { return this.$super(foo.MyClass, 'multiply', n + 2); } ```

  Notice that the class specified in the first argument is not the super class having the method. Rather, it is the class that invokes this method.

  #### Type Parameters

  - #### M extends "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "stop" | "data" | "keys" | "itemSelected" | "tooltipped" | "contextSelected" | "which" | "metaKey" | "ctrlKey" | "altKey" | "shiftKey" | "pageX" | "pageY" | "key" | "keyCode" | "charCode" | "shallStop" | "target" | "currentTarget" | "name" | "opts" | "domEvent" | "domTarget" | "stopped" | "auStopped" | "domStopped" | "addOptions" | "isPressed"

  - #### F extends any

  #### Parameters

  - ##### klass: typeof ZKObject

    the class that invokes this method.

  - ##### mtd: M

    the method name to invoke

  - ##### `Rest` ...args: Parameters<F>

    any number of arguments

  #### Returns ReturnType<F>

  the object being returned by the method of the superclass.

  #### See

  zk.Object.$supers

  #### Since

  5.0.2

  Inherited from zk.Object.$super

### $supers

- $supers<M, F>(name, args): ReturnType<F>

- Invokes a method defined in the superclass with an array of arguments. It is like Function's apply() that takes an array of arguments.

  Example: ```ts multiply: function () { return this.$supers('multiply', arguments); } ```

  #### Type Parameters

  - #### M extends "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "stop" | "data" | "keys" | "itemSelected" | "tooltipped" | "contextSelected" | "which" | "metaKey" | "ctrlKey" | "altKey" | "shiftKey" | "pageX" | "pageY" | "key" | "keyCode" | "charCode" | "shallStop" | "target" | "currentTarget" | "name" | "opts" | "domEvent" | "domTarget" | "stopped" | "auStopped" | "domStopped" | "addOptions" | "isPressed"

  - #### F extends any

  #### Parameters

  - ##### name: M

    the method name to invoke

  - ##### args: Parameters<F>

    an array of arguments. In most case, you just pass `arguments` (the built-in variable).

  #### Returns ReturnType<F>

  the object being returned by the method of the superclass.

  #### See

  zk.Object.$super

  Inherited from zk.Object.$supers

- $supers<M, F>(klass, name, args): ReturnType<F>

- Invokes a method defined in the superclass with an array of arguments. It is like Function's apply() that takes an array of arguments.

  It is similar to zk.Object.$supers, but this method works even if the superclass calls back the same member method. In short, it is tedious but safer.

  Example: ```ts foo.MyClass = zk.$extends(foo.MySuper, { multiply: function () { return this.$supers(foo.MyClass, 'multiply', arguments); } ```

  Notice that the class specified in the first argument is not the super class having the method. Rather, it is the class that invokes this method.

  #### Type Parameters

  - #### M extends "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "stop" | "data" | "keys" | "itemSelected" | "tooltipped" | "contextSelected" | "which" | "metaKey" | "ctrlKey" | "altKey" | "shiftKey" | "pageX" | "pageY" | "key" | "keyCode" | "charCode" | "shallStop" | "target" | "currentTarget" | "name" | "opts" | "domEvent" | "domTarget" | "stopped" | "auStopped" | "domStopped" | "addOptions" | "isPressed"

  - #### F extends any

  #### Parameters

  - ##### klass: typeof ZKObject

    the class that invokes this method.

  - ##### name: M

    the method name to invoke

  - ##### args: Parameters<F>

    an array of arguments. In most case, you just pass `arguments` (the built-in variable).

  #### Returns ReturnType<F>

  the object being returned by the method of the superclass.

  #### See

  zk.Object.$super

  #### Since

  5.0.2

  Inherited from zk.Object.$supers

### addOptions

- addOptions(opts): void

- Adds the additions options to opts.

  #### Parameters

  - ##### opts: EventOptions

    a map of options to append to #opts

  #### Returns void

### afterCreated_

- afterCreated_(props?): void

- This function is called after the object is initialized and all its member fields are ready to use.

  #### Parameters

  - ##### `Optional` props: Record<string, unknown> | (() => void)

    the properties passed by constructor.

  #### Returns void

  #### Since

  10.0.0

  Inherited from zk.Object.afterCreated_

### afterInit

- afterInit(func): void

- Specifies a function that shall be called after the object is initialized, i.e., after zk.Object.$init is called. This method can be called only during the execution of zk.Object.$init.

  It is an advance feature that is used to allow a base class to do something that needs to wait for all deriving classes have been initialized.

  Invocation Sequence:

  - The most derived class's $init (subclass)
  - The based class's $init (if the derived class's $init invokes this.$supers('$init', arguments))
  - The first function, if any, be added with afterInit, then the second (in the same order that afterInit was called)...

  #### Parameters

  - ##### func: CallableFunction

    the function to register for execution later

  #### Returns void

  #### See

  zk.Object.$init

  #### Deprecated

  as of 10.0 released. Using afterCreated_ instead.

  Inherited from zk.Object.afterInit

### get$Class

- get$Class<T>(): T

- #### Type Parameters

  - #### T extends typeof ZKObject

  #### Returns T

  the class of the subsclass which extends from zk.Class.

  #### Since

  10.0.0

  Inherited from zk.Object.get$Class

### isPressed

- isPressed(...args): boolean

- Indicates whether a key is currently pressed. You can also pass more then one key into this method as a key combination, but combination only works with modifier keys(ALT/CONTROL/SHIFT/META). If you combine two(or more) keys that are not modifier keys, you will always get an exception since it is invalid. For example: isPressed(zKeys.CONTROL, zKeys.ALT, zKeys.ARROWDOWN) is valid. isPressed(zKeys.ARROWDOWN, zKeys.ARROWUP) is invalid.

  #### Parameters

  - ##### `Rest` ...args: zKeys[]

    The target key and the modifier keys

  #### Returns boolean

  #### Since

  9.5.0

  #### See

  zKeys

### proxy

- proxy<A, R>(func): ((...args) => R)

- Proxies a member function such that it can be called with this object in a context that this object is not available. It sounds a bit strange at beginning but useful when passing a member of an object that will be executed as a global function.

  Example: Let us say if you want a member function to be called periodically, you can do as follows. ```ts setInterval(wgt.proxy(wgt.doIt), 1000); //assume doIt is a member function of wgt ```

  With proxy, when doIt is called, this references to wgt. On the other hand, the following won't work since this doesn't reference to wgt, when doIt is called. ```ts setInterval(wgt.doIt, 1000); //WRONG! doIt will not be called with wgt ```

  Notice that this method caches the result so that it will return the same proxied function, if you pass the same function again.

  #### Type Parameters

  - #### A extends unknown[]

  - #### R

  #### Parameters

  - ##### func: ((...args) => R)

    a method member of this object

    - - (...args): R

      - #### Parameters

        - ##### `Rest` ...args: A

        #### Returns R

  #### Returns ((...args) => R)

  a function that can be called as a global function (that actually have `this` referencing to this object).

  - - (...args): R

    - #### Parameters

      - ##### `Rest` ...args: A

      #### Returns R

  Inherited from zk.Object.proxy

- proxy<A0, A, R>(func): ((arg0, ...args) => R)

- #### Type Parameters

  - #### A0

  - #### A extends unknown[]

  - #### R

  #### Parameters

  - ##### func: ((arg0, ...args) => R)

    - - (arg0, ...args): R

      - #### Parameters

        - ##### arg0: A0

        - ##### `Rest` ...args: A

        #### Returns R

  #### Returns ((arg0, ...args) => R)

  - - (arg0, ...args): R

    - #### Parameters

      - ##### arg0: A0

      - ##### `Rest` ...args: A

      #### Returns R

  Inherited from zk.Object.proxy

- proxy<A0, A1, A, R>(func): ((arg0, arg1, ...args) => R)

- #### Type Parameters

  - #### A0

  - #### A1

  - #### A extends unknown[]

  - #### R

  #### Parameters

  - ##### func: ((arg0, arg1, ...args) => R)

    - - (arg0, arg1, ...args): R

      - #### Parameters

        - ##### arg0: A0

        - ##### arg1: A1

        - ##### `Rest` ...args: A

        #### Returns R

  #### Returns ((arg0, arg1, ...args) => R)

  - - (arg0, arg1, ...args): R

    - #### Parameters

      - ##### arg0: A0

      - ##### arg1: A1

      - ##### `Rest` ...args: A

      #### Returns R

  Inherited from zk.Object.proxy

- proxy<A0, A1, A2, A, R>(func): ((arg0, arg1, arg2, ...args) => R)

- #### Type Parameters

  - #### A0

  - #### A1

  - #### A2

  - #### A extends unknown[]

  - #### R

  #### Parameters

  - ##### func: ((arg0, arg1, arg2, ...args) => R)

    - - (arg0, arg1, arg2, ...args): R

      - #### Parameters

        - ##### arg0: A0

        - ##### arg1: A1

        - ##### arg2: A2

        - ##### `Rest` ...args: A

        #### Returns R

  #### Returns ((arg0, arg1, arg2, ...args) => R)

  - - (arg0, arg1, arg2, ...args): R

    - #### Parameters

      - ##### arg0: A0

      - ##### arg1: A1

      - ##### arg2: A2

      - ##### `Rest` ...args: A

      #### Returns R

  Inherited from zk.Object.proxy

- proxy<A0, A1, A2, A3, A, R>(func): ((arg0, arg1, arg2, arg3, ...args) => R)

- #### Type Parameters

  - #### A0

  - #### A1

  - #### A2

  - #### A3

  - #### A extends unknown[]

  - #### R

  #### Parameters

  - ##### func: ((arg0, arg1, arg2, arg3, ...args) => R)

    - - (arg0, arg1, arg2, arg3, ...args): R

      - #### Parameters

        - ##### arg0: A0

        - ##### arg1: A1

        - ##### arg2: A2

        - ##### arg3: A3

        - ##### `Rest` ...args: A

        #### Returns R

  #### Returns ((arg0, arg1, arg2, arg3, ...args) => R)

  - - (arg0, arg1, arg2, arg3, ...args): R

    - #### Parameters

      - ##### arg0: A0

      - ##### arg1: A1

      - ##### arg2: A2

      - ##### arg3: A3

      - ##### `Rest` ...args: A

      #### Returns R

  Inherited from zk.Object.proxy

### stop

- stop(opts?): void

-     evt.stop();
      evt.stop({propagation:true}); //stop only the event propagation (see below)
      evt.stop({au:true}); //stop only the sending of the AU request

  Stop the event propagation.

      evt.stop();
      evt.stop({propagation:true}); //stop only the event propagation (see below)
      evt.stop({au:true}); //stop only the sending of the AU request

  If you want to revoke the stop of the event propagation, you can specify `{revoke:true}` to the opts argument. ```ts evt.stop({progagation:true,revoke:true}); //revoke the event propagation ```

  Notice that the event won't be sent to the server if stop() was called.

  #### Parameters

  - ##### `Optional` opts: EventStopOptions

    control what to stop. If omitted, the event propagation (stopped) and the native DOM event (domStopped) are both stopped (but not auStopped). For fine control, you can use a combination of the following values:

    - revoke - revoke the stop, i.e., undo the last invocation of stop
    - propagation - stop (or revoke) the event propagation (stopped).
    - dom - stop (or revoke) the native DOM event (domStopped).
    - au - stop (or revoke) the sending of the AU request to the server (auStopped). Notice that, unlike the propagation and dom options, the sending of AU requests won't be stopped if opts is omitted. In other words, to stop it, you have to specify the au option explicitly.

  #### Returns void

### `Static` isAssignableFrom

- isAssignableFrom(cls): boolean

- Determines if the class by this Class object is either the same as, or is a superclass of, the class represented by the specified Class parameter. Example:

      if (klass1.isAssignableFrom(klass2)) {
      }

  #### Parameters

  - ##### cls: typeof ZKObject

    the Class object to be checked, such as zk.Widget.

  #### Returns boolean

  true if assignable

  Inherited from zk.Object.isAssignableFrom

### `Static` isInstance

- isInstance<T>(this, o): o is InstanceType<T>

- Determines if the specified Object is assignment-compatible with this Class. This method is equivalent to [[zk.Object#$instanceof]. Example:

      if (klass.isInstance(obj)) {
      }

  #### Type Parameters

  - #### T extends typeof ZKObject

  #### Parameters

  - ##### this: T

  - ##### o: unknown

    the object to check

  #### Returns o is InstanceType<T>

  true if the object is an instance

  Inherited from zk.Object.isInstance