$w.Event

$w.Event

Events are fired when certain actions occur to elements.

Events can be caused by user interactions, such as clicking the mouse or pressing a key, or generated programmatically, such as hiding or showing an element using the hide() and show() functions.

Contents

context Gets the context of the event on a repeated element.
target Gets the element that the event was fired on.
type Gets the type of event that was fired.
EventContext An object that contains information about the context in which an event was fired.
context

context

Gets the context of the event on a repeated element.

Syntax

get context(): Object

Description

An event's context contains information about the circumstances surrounding the firing of the event. The context property only appears in events on repeated elements.

You can use the evnet context with $w.at() to get a selector function which selects items from a specific repeater item. It contains an object with one key:value pair. The key is "itemId" and the value is the ID of the repeated item on which the event occurred.

Type

EventContext

Examples

Get the context of the event

Ly8gbm9uLXJlcGVhdGVyIGV2ZW50CgokdygiI215RWxlbWVudCIpLm9uRXZlbnQoIChldmVudCkgPT4gewogIGxldCB0eXBlID0gZXZlbnQuY29udGV4dC50eXBlOyAvLyAiR0xPQkFMX1NDT1BFIgp9ICk7CgoKLy8gcmVwZWF0ZXIgZXZlbnQKCiR3KCIjbXlSZXBlYXRlZEVsZW1lbnQiKS5vbkV2ZW50KCAoZXZlbnQpID0+IHsKICBsZXQgJGl0ZW0gPSAkdy5hdChldmVudC5jb250ZXh0KQogICRpdGVtKCIjYW5vdGhlclJlcGVhdGVkRWxlbWVudCIpLnZhbHVlID0gIm5ldyB2YWx1ZSI7CgogIGxldCBpdGVtSWQgPSBldmVudC5jb250ZXh0Lml0ZW1JZDsgIC8vICJpdGVtMSIKfSApOwo=
// non-repeater event

$w("#myElement").onEvent( (event) => {
  let type = event.context.type; // "GLOBAL_SCOPE"
} );


// repeater event

$w("#myRepeatedElement").onEvent( (event) => {
  let $item = $w.at(event.context)
  $item("#anotherRepeatedElement").value = "new value";

  let itemId = event.context.itemId;  // "item1"
} );
target

target

Gets the element that the event was fired on.

Syntax

get target(): string

Type

Element

Examples

Get the ID of the target element

JHcoIiNteUVsZW1lbnQiKS5vbkV2ZW50KCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IHRhcmdldElkID0gZXZlbnQudGFyZ2V0LmlkOyAgLy8gIm15RWxlbWVudCIKfSApOwo=
$w("#myElement").onEvent( (event, $w) => {
  let targetId = event.target.id;  // "myElement"
} );
type

type

Gets the type of event that was fired.

Syntax

get type(): string

Type

String

Examples

Get the type of the event

JHcoIiNteUVsZW1lbnQiKS5vbkV2ZW50KCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGV2ZW50VHlwZSA9IGV2ZW50LnR5cGU7IC8vICJjbGljayIKfSApOwo=
$w("#myElement").onEvent( (event, $w) => {
  let eventType = event.type; // "click"
} );
EventContext

EventContext

An object that contains information about the context in which an event was fired.

Type

Object

Properties

type String "GLOBAL_SCOPE" for events fired outside of repeaters, or "COMPONENT_SCOPE" for events fired from repeaters.
itemId (optional) Prefix[ ] ID of the repeater item where the event was fired from.

Examples

Get information about the site's pages, prefixes, and lightboxes

aW1wb3J0IHdpeFNpdGUgZnJvbSAnd2l4LXNpdGUnOwoKLy8gLi4uCgpsZXQgc3RydWN0dXJlID0gd2l4U2l0ZS5nZXRTaXRlU3RydWN0dXJlKCk7CgovKgogKiB7CiAqIAkgInBhZ2VzIjogWwogKiAgICAgewogKiAgICAJCSJuYW1lIjogIkhPTUUiLAogKiAgICAJCSJ0eXBlIjogInN0YXRpYyIsCiAqICAgIAkJInVybCI6ICIvaG9tZSIKICogICAgIH0sCiAqICAgICB7CiAqICAgIAkJIm5hbWUiOiAiUGFyZW50IFBhZ2UiLAogKiAgICAJCSJ0eXBlIjogInN0YXRpYyIsCiAqICAgIAkJInVybCI6ICIvcGFyZW50LXBhZ2UiCiAqICAgICB9LAogKiAgICAgewogKiAgICAJCSJuYW1lIjogIkNoaWxkIFBhZ2UiLAogKiAgICAJCSJ0eXBlIjogInN0YXRpYyIsCiAqICAgIAkJInVybCI6ICIvY2hpbGQtcGFnZSIKICogICAgIH0sCiAqICAgICB7CiAqICAgIAkJIm5hbWUiOiAiUGFnZTEiLAogKiAgICAJCSJ0eXBlIjogInN0YXRpYyIsCiAqICAgIAkJInVybCI6ICIvcGFnZTEiCiAqICAgICB9LAogKiAgICAgewogKiAgICAJCSJuYW1lIjogIlBhZ2UyIiwKICogICAgCQkidHlwZSI6ICJzdGF0aWMiLAogKiAgICAJCSJ1cmwiOiAiL3BhZ2UyIgogKiAgICAgfSwKICogICAgIHsKICogICAgCQkibmFtZSI6ICJNeUNvbGxlY3Rpb24gKFRpdGxlKSIsCiAqICAgIAkJInR5cGUiOiAidGVtcGxhdGUiLAogKiAgICAJCSJwcmVmaXgiOiAibXlDb2xsZWN0aW9uIgogKiAgICAgfSwKICogICAgIHsKICogICAgCQkibmFtZSI6ICJyb3V0ZXItcGFnZSIsCiAqICAgIAkJInR5cGUiOiAidGVtcGxhdGUiLAogKiAgICAJCSJwcmVmaXgiOiAicm91dGVyIgogKiAgICAgfSwKICogICAgIHsKICogICAgCQkibmFtZSI6ICJTaG9wIiwKICogICAgCQkidHlwZSI6ICJ0ZW1wbGF0ZSIsCiAqICAgIAkJInVybCI6ICIvc2hvcCIsCiAqICAgIAkJImFwcGxpY2F0aW9uSWQiOiAiMTM4MGI3MDMtY2U4MS1mZjA1LWYxMTUtMzk1NzFkOTRkZmNkIgogKiAgICAgfSwKICogICAgIHsKICogICAgCQkibmFtZSI6ICJQcm9kdWN0IFBhZ2UiLAogKiAgICAJCSJ0eXBlIjogInRlbXBsYXRlIiwKICogICAgCQkidXJsIjogIi9wcm9kdWN0LXBhZ2UiLAogKiAgICAJCSJhcHBsaWNhdGlvbklkIjogIjEzODBiNzAzLWNlODEtZmYwNS1mMTE1LTM5NTcxZDk0ZGZjZCIKICogICAgIH0sCiAqICAgICB7CiAqICAgIAkJIm5hbWUiOiAiQ2FydCIsCiAqICAgIAkJInR5cGUiOiAidGVtcGxhdGUiLAogKiAgICAJCSJ1cmwiOiAiL2NhcnQiLAogKiAgICAJCSJhcHBsaWNhdGlvbklkIjogIjEzODBiNzAzLWNlODEtZmYwNS1mMTE1LTM5NTcxZDk0ZGZjZCIKICogICAgIH0sCiAqICAgICB7CiAqICAgIAkJIm5hbWUiOiAiVGhhbmsgWW91IFBhZ2UiLAogKiAgICAJCSJ0eXBlIjogInRlbXBsYXRlIiwKICogICAgCQkidXJsIjogIi90aGFuay15b3UtcGFnZSIsCiAqICAgIAkJImFwcGxpY2F0aW9uSWQiOiAiMTM4MGI3MDMtY2U4MS1mZjA1LWYxMTUtMzk1NzFkOTRkZmNkIgogKiAgICAgfQogKiAgIF0sCiAqIAkgInByZWZpeGVzIjogWwogKiAgICAgewogKiAgICAJCSJuYW1lIjogIm15Q29sbGVjdGlvbiIsCiAqICAgIAkJInR5cGUiOiAiZHluYW1pY1BhZ2VzIiwKICogICAgCQkicHJlZml4IjogIi9teUNvbGxlY3Rpb24iCiAqICAgICB9LAogKiAgICAgewogKiAgICAJCSJuYW1lIjogInJvdXRlciIsCiAqICAgIAkJInR5cGUiOiAicm91dGVyIiwKICogICAgCQkicHJlZml4IjogIi9yb3V0ZXIiCiAqICAgICB9LAogKiAgICAgewogKiAgICAJCSJuYW1lIjogIlNob3AiLAogKiAgICAJCSJ0eXBlIjogImFwcCIsCiAqICAgIAkJInByZWZpeCI6ICIvc2hvcCIsCiAqICAgIAkJImFwcGxpY2F0aW9uSWQiOiAiMTM4MGI3MDMtY2U4MS1mZjA1LWYxMTUtMzk1NzFkOTRkZmNkIgogKiAgICAgfSwKICogICAgIHsKICogICAgCQkibmFtZSI6ICJQcm9kdWN0IFBhZ2UiLAogKiAgICAJCSJ0eXBlIjogImFwcCIsCiAqICAgIAkJInByZWZpeCI6ICIvcHJvZHVjdC1wYWdlIiwKICogICAgCQkiYXBwbGljYXRpb25JZCI6ICIxMzgwYjcwMy1jZTgxLWZmMDUtZjExNS0zOTU3MWQ5NGRmY2QiCiAqICAgICB9LAogKiAgICAgewogKiAgICAJCSJuYW1lIjogIkNhcnQiLAogKiAgICAJCSJ0eXBlIjogImFwcCIsCiAqICAgIAkJInByZWZpeCI6ICIvY2FydCIsCiAqICAgIAkJImFwcGxpY2F0aW9uSWQiOiAiMTM4MGI3MDMtY2U4MS1mZjA1LWYxMTUtMzk1NzFkOTRkZmNkIgogKiAgICAgfSwKICogICAgIHsKICogICAgCQkibmFtZSI6ICJUaGFuayBZb3UgUGFnZSIsCiAqICAgIAkJInR5cGUiOiAiYXBwIiwKICogICAgCQkicHJlZml4IjogIi90aGFuay15b3UtcGFnZSIsCiAqICAgIAkJImFwcGxpY2F0aW9uSWQiOiAiMTM4MGI3MDMtY2U4MS1mZjA1LWYxMTUtMzk1NzFkOTRkZmNkIgogKiAgICAgfQogKiAgIF0sCiAqIAkgImxpZ2h0Ym94ZXMiOiBbCiAqICAgICB7CiAqIAkgCSAgIm5hbWUiOiAiV2VsY29tZSAoRnVsbCBTY3JlZW4pIgogKiAJICAgfQogKiAgIF0KICogfQogKi8K
import wixSite from 'wix-site';

// ...

let structure = wixSite.getSiteStructure();

/*
 * {
 * 	 "pages": [
 *     {
 *    		"name": "HOME",
 *    		"type": "static",
 *    		"url": "/home"
 *     },
 *     {
 *    		"name": "Parent Page",
 *    		"type": "static",
 *    		"url": "/parent-page"
 *     },
 *     {
 *    		"name": "Child Page",
 *    		"type": "static",
 *    		"url": "/child-page"
 *     },
 *     {
 *    		"name": "Page1",
 *    		"type": "static",
 *    		"url": "/page1"
 *     },
 *     {
 *    		"name": "Page2",
 *    		"type": "static",
 *    		"url": "/page2"
 *     },
 *     {
 *    		"name": "MyCollection (Title)",
 *    		"type": "template",
 *    		"prefix": "myCollection"
 *     },
 *     {
 *    		"name": "router-page",
 *    		"type": "template",
 *    		"prefix": "router"
 *     },
 *     {
 *    		"name": "Shop",
 *    		"type": "template",
 *    		"url": "/shop",
 *    		"applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
 *     },
 *     {
 *    		"name": "Product Page",
 *    		"type": "template",
 *    		"url": "/product-page",
 *    		"applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
 *     },
 *     {
 *    		"name": "Cart",
 *    		"type": "template",
 *    		"url": "/cart",
 *    		"applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
 *     },
 *     {
 *    		"name": "Thank You Page",
 *    		"type": "template",
 *    		"url": "/thank-you-page",
 *    		"applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
 *     }
 *   ],
 * 	 "prefixes": [
 *     {
 *    		"name": "myCollection",
 *    		"type": "dynamicPages",
 *    		"prefix": "/myCollection"
 *     },
 *     {
 *    		"name": "router",
 *    		"type": "router",
 *    		"prefix": "/router"
 *     },
 *     {
 *    		"name": "Shop",
 *    		"type": "app",
 *    		"prefix": "/shop",
 *    		"applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
 *     },
 *     {
 *    		"name": "Product Page",
 *    		"type": "app",
 *    		"prefix": "/product-page",
 *    		"applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
 *     },
 *     {
 *    		"name": "Cart",
 *    		"type": "app",
 *    		"prefix": "/cart",
 *    		"applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
 *     },
 *     {
 *    		"name": "Thank You Page",
 *    		"type": "app",
 *    		"prefix": "/thank-you-page",
 *    		"applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
 *     }
 *   ],
 * 	 "lightboxes": [
 *     {
 * 	 	  "name": "Welcome (Full Screen)"
 * 	   }
 *   ]
 * }
 */

Get the context of the event

Ly8gbm9uLXJlcGVhdGVyIGV2ZW50CgokdygiI215RWxlbWVudCIpLm9uRXZlbnQoIChldmVudCkgPT4gewogIGxldCB0eXBlID0gZXZlbnQuY29udGV4dC50eXBlOyAvLyAiR0xPQkFMX1NDT1BFIgp9ICk7CgoKLy8gcmVwZWF0ZXIgZXZlbnQKCiR3KCIjbXlSZXBlYXRlZEVsZW1lbnQiKS5vbkV2ZW50KCAoZXZlbnQpID0+IHsKICBsZXQgJGl0ZW0gPSAkdy5hdChldmVudC5jb250ZXh0KQogICRpdGVtKCIjYW5vdGhlclJlcGVhdGVkRWxlbWVudCIpLnZhbHVlID0gIm5ldyB2YWx1ZSI7CgogIGxldCBpdGVtSWQgPSBldmVudC5jb250ZXh0Lml0ZW1JZDsgIC8vICJpdGVtMSIKfSApOwo=
// non-repeater event

$w("#myElement").onEvent( (event) => {
  let type = event.context.type; // "GLOBAL_SCOPE"
} );


// repeater event

$w("#myRepeatedElement").onEvent( (event) => {
  let $item = $w.at(event.context)
  $item("#anotherRepeatedElement").value = "new value";

  let itemId = event.context.itemId;  // "item1"
} );

See Also

context