Module sciter::dom::event
[−]
[src]
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, ... );
– callingon_script_call
ofEventHandler
instance attached to the window. - As element’s methods:
var r = el.funcName( p0, p1, ... );
– callingon_script_call
ofEventHandler
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 |