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 fire. To listen a widget event, use listen.

See Also

Common Key Codes:

BACKSSPACE8 TAB9 ENTER13 SHIFT16 CTRL17
ALT18 ESC27 PGUP33 PGDN34 END35
HOME36 LEFT37 UP38 RIGHT39 DOWN40
INS45 DEL46 F1112

Type Parameters

  • TData = unknown

Hierarchy

Constructors

  • Type Parameters

    • TData = unknown

    Parameters

    • target: undefined | zk.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>

Properties

$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)

altKey: any
auStopped: boolean = false

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

See

charCode?: number
contextSelected?: boolean
ctrlKey: any
currentTarget?: zk.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

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.

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

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

domStopped: boolean = false

Indicates whether to stop the native DOM event.

See

domTarget: HTMLElement

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

itemSelected?: boolean
key: string
keyCode: number
metaKey: boolean
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 } } ```

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: number
pageY: number
shallStop: boolean = false
shiftKey: boolean
stopped: boolean = false

Indicates whether the event propagation is stopped.

See

target: zk.Widget<HTMLElement>

The target widget (readonly).

See

currentTarget

tooltipped?: boolean
which: number
$oid: any

Accessors

  • get $class(): typeof ZKObject
  • The class that this object belongs to.

    Returns typeof ZKObject

Methods

  • The constructor.

    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.

    Parameters

    • Optional props: Record<string, unknown> | (() => void)

    Returns void

  • 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)) {
    }

    Returns

    true if this object is an instance of the class

    Parameters

    • Rest ...klass: any[]

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

    Returns boolean

  • 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); } ```

    Returns

    the object being returned by the method of the superclass.

    See

    zk.Object.$supers

    Type Parameters

    • M extends "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "$init" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "$supers" | "proxy" | "stop" | "keys" | "itemSelected" | "tooltipped" | "contextSelected" | "which" | "metaKey" | "ctrlKey" | "altKey" | "shiftKey" | "pageX" | "pageY" | "key" | "keyCode" | "charCode" | "shallStop" | "target" | "currentTarget" | "name" | "data" | "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>

  • 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 $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.

    Returns

    the object being returned by the method of the superclass.

    See

    zk.Object.$supers

    Since

    5.0.2

    Type Parameters

    • M extends "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "$init" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "$supers" | "proxy" | "stop" | "keys" | "itemSelected" | "tooltipped" | "contextSelected" | "which" | "metaKey" | "ctrlKey" | "altKey" | "shiftKey" | "pageX" | "pageY" | "key" | "keyCode" | "charCode" | "shallStop" | "target" | "currentTarget" | "name" | "data" | "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>

  • 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); } ```

    Returns

    the object being returned by the method of the superclass.

    See

    zk.Object.$super

    Type Parameters

    • M extends "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "$init" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "$supers" | "proxy" | "stop" | "keys" | "itemSelected" | "tooltipped" | "contextSelected" | "which" | "metaKey" | "ctrlKey" | "altKey" | "shiftKey" | "pageX" | "pageY" | "key" | "keyCode" | "charCode" | "shallStop" | "target" | "currentTarget" | "name" | "data" | "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>

  • 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.

    Returns

    the object being returned by the method of the superclass.

    See

    zk.Object.$super

    Since

    5.0.2

    Type Parameters

    • M extends "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "$init" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "$supers" | "proxy" | "stop" | "keys" | "itemSelected" | "tooltipped" | "contextSelected" | "which" | "metaKey" | "ctrlKey" | "altKey" | "shiftKey" | "pageX" | "pageY" | "key" | "keyCode" | "charCode" | "shallStop" | "target" | "currentTarget" | "name" | "data" | "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>

  • Adds the additions options to opts.

    Parameters

    Returns 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)...

    See

    zk.Object.$init

    Deprecated

    as of 10.0 released. Using afterCreated_ instead.

    Parameters

    • func: CallableFunction

      the function to register for execution later

    Returns void

  • Returns

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

    Since

    10.0.0

    Type Parameters

    Returns T

  • 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.

    Since

    9.5.0

    See

    zKeys

    Parameters

    • Rest ...args: string[]

      The target key and the modifier keys

    Returns boolean

  • 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.

    Returns

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

    Type Parameters

    • A extends unknown[]

    • R

    Parameters

    • func: ((...args: A) => R)

      a method member of this object

        • (...args: A): R
        • Parameters

          • Rest ...args: A

          Returns R

    Returns ((...args: A) => R)

      • (...args: A): 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.

        Returns

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

        Parameters

        • Rest ...args: A

        Returns R

  • Type Parameters

    • A0

    • A extends unknown[]

    • R

    Parameters

    • func: ((arg0: A0, ...args: A) => R)
        • (arg0: A0, ...args: A): R
        • Parameters

          • arg0: A0
          • Rest ...args: A

          Returns R

    Returns ((arg0: A0, ...args: A) => R)

      • (arg0: A0, ...args: A): R
      • Parameters

        • arg0: A0
        • Rest ...args: A

        Returns R

  • Type Parameters

    • A0

    • A1

    • A extends unknown[]

    • R

    Parameters

    • func: ((arg0: A0, arg1: A1, ...args: A) => R)
        • (arg0: A0, arg1: A1, ...args: A): R
        • Parameters

          • arg0: A0
          • arg1: A1
          • Rest ...args: A

          Returns R

    Returns ((arg0: A0, arg1: A1, ...args: A) => R)

      • (arg0: A0, arg1: A1, ...args: A): R
      • Parameters

        • arg0: A0
        • arg1: A1
        • Rest ...args: A

        Returns R

  • Type Parameters

    • A0

    • A1

    • A2

    • A extends unknown[]

    • R

    Parameters

    • func: ((arg0: A0, arg1: A1, arg2: A2, ...args: A) => R)
        • (arg0: A0, arg1: A1, arg2: A2, ...args: A): R
        • Parameters

          • arg0: A0
          • arg1: A1
          • arg2: A2
          • Rest ...args: A

          Returns R

    Returns ((arg0: A0, arg1: A1, arg2: A2, ...args: A) => R)

      • (arg0: A0, arg1: A1, arg2: A2, ...args: A): R
      • Parameters

        • arg0: A0
        • arg1: A1
        • arg2: A2
        • Rest ...args: A

        Returns R

  • Type Parameters

    • A0

    • A1

    • A2

    • A3

    • A extends unknown[]

    • R

    Parameters

    • func: ((arg0: A0, arg1: A1, arg2: A2, arg3: A3, ...args: A) => R)
        • (arg0: A0, arg1: A1, arg2: A2, arg3: A3, ...args: A): R
        • Parameters

          • arg0: A0
          • arg1: A1
          • arg2: A2
          • arg3: A3
          • Rest ...args: A

          Returns R

    Returns ((arg0: A0, arg1: A1, arg2: A2, arg3: A3, ...args: A) => R)

      • (arg0: A0, arg1: A1, arg2: A2, arg3: A3, ...args: A): R
      • Parameters

        • arg0: A0
        • arg1: A1
        • arg2: A2
        • arg3: A3
        • Rest ...args: A

        Returns R

  • 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

  • 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)) {
    }

    Returns

    true if assignable

    Parameters

    • cls: typeof ZKObject

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

    Returns boolean

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

    if (klass.isInstance(obj)) {
    }

    Returns

    true if the object is an instance

    Type Parameters

    Parameters

    • this: T
    • o: unknown

      the object to check

    Returns o is InstanceType<T>