[−][src]Module sciter::dom::event
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, ... );
– callingon_script_call
of anEventHandler
instance attached to the window. - As element’s methods:
var r = el.funcName( p0, p1, ... );
– callingon_script_call
of anEventHandler
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 |
DRAW_EVENTS | Layer to draw. |
EDIT_CHANGED_REASON | Edit control change trigger. |
EVENT_GROUPS | Event groups for subscription. |
EventReason | UI action causing change. |
MethodParams | Behavior method params. |
PHASE_MASK | Event propagation schema. |
Traits
EventHandler | DOM event handler which can be attached to any DOM element. |
Functions
default_events | Default subscription events |