Module sciter::dom::event

Behaviors support (a.k.a windowless controls).

Behaviors and event handling.

Primary goal of User Interface (UI) as a subsystem is to present some information to the user and generate some events according to user’s actions. Your application handles UI events and acts accordingly executing its functions.

To be able to handle events in native code you will need to attach instance of sciter::EventHandler to existing DOM element or to the window itself. In the EventHandler you will receive all events dispatched to the element and its children as before children (in PHASE_MASK::SINKING phase) as after them (PHASE_MASK::BUBBLING event phase), see Events Propagation.

EventHandler attached to the window will receive all DOM events no matter which element they are targeted to.

EventHandler contains various methods – receivers of events of various types. You can override any of these methods in order to receive events you are interested in your implementation of sciter::EventHandler class.

To attach native event handler to DOM element or to the window you can do one of these:

• "Manually", to Sciter window: sciter::Window.event_handler(your_event_handler)
• "Manually", to arbitrary DOM element: sciter::dom::Element.attach_handler(your_event_handler)
• To group of DOM elements by declaration in CSS: selector { behavior:your-behavior-name }

You also can assign events handlers defined in script code:

• "Manually", individual events: if you have reference el of some element then to handle mouse events you can do this for example:

el.onMouse = function(evt) { ... }

• "Manually", by assigning behavior class to the Element:

class MyEventsHandler: Element { ... }  // your behavior class which inherits sciter's Element class
el.prototype = MyEventsHandler; // "sub-class" the element.

• By declaration in CSS to all elements satisfying some CSS selector:

selector { prototype: MyEventsHandler; }

In this case MyEventsHandler class should be defined in one of script files loaded by your HTML.

See the Behavior attributes section of Sciter CSS property map and this blog article which covers Behaviors, Prototypes and Aspects of Sciter CSS behavior assignment.

Script and native code interaction

In Sciter you may want to define native functions that can be called by script. At the same time you may need to call script functions from native code. Sciter supports such interaction providing set of simple API functions:

Evaluating scripts and invoking script functions from native code

You can use one of these methods to call scripts from code of your application:

• To evaluate arbitrary script in context of current document loaded into the window:

let root = Element::from_window(hwnd);
let result: Value = root.eval_script("... script ...");

• To call global function defined in script using its full name (may include name of namespaces where it resides):

let root = Element::from_window(hwnd);
let result: Value = root.call_function("namespace.name", &make_args!(p0, p1, ...));

parameters – &[Value] slice.

• To call method (function) defined in script for particular DOM element:

dom::element el = root.find_first(...);
let result: Value = el.call_method("method_name", &make_args!());

Calling native code from script

If needed your application may expose some [native] functions to be called by script code. Usually this is made by implementing your own EventHandler and overriding its on_script_call method. If you will do this then you can invoke this callback from script as:

• "global" native functions: var r = view.funcName( p0, p1, ... ); – calling on_script_call of EventHandler instance attached to the window.
• As element’s methods: var r = el.funcName( p0, p1, ... ); – calling on_script_call of EventHandler instance (native behavior) attached to the element.

This way you can establish interaction between scipt and native code inside your application.

Enums

BEHAVIOR_EVENTS	Behavior event codes.
CLICK_REASON	General event source triggers
EDIT_CHANGED_REASON	Edit control change trigger.
EVENT_GROUPS	Event groups for subscription.
EventReason	UI action causing change.
PHASE_MASK	Event propagation schema.

Traits

EventHandler

DOM event handler which can be attached to any DOM element.

Functions

default_events

Default subscription events