Module sciter::dom::event

Expand description

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

Behaviors and event handling.

The primary goal of the 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 an instance of sciter::EventHandler to an existing DOM element or to the window itself. In EventHandler’s implementation 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 in your implementation of sciter::EventHandler.

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

“Manually”, to a Sciter window: sciter::Window.event_handler(your_event_handler)
“Manually”, to an arbitrary DOM element: sciter::dom::Element.attach_handler(your_event_handler)
To a 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 a reference el of some element then to handle mouse events you can do this, for example:

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

“Manually”, by assigning a 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).unwrap();
let result: Value = root.eval_script("... script ...").unwrap();

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

let result: Value = root.call_function("namespace.name", &make_args!(1, "2", 3.0)).unwrap();

The parameters are passed as a &[Value] slice.

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

if let Some(el) = root.find_first("input").unwrap() {
  let result: Value = el.call_method("canUndo", &make_args!()).unwrap();
}

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 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 an EventHandler instance attached to the window.
As element’s methods: var r = el.funcName( p0, p1, ... ); – calling on_script_call of an EventHandler instance (native behavior) attached to the element.

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