1. Overview
A large number of objects in the HuTime have the ability to handle events, such as mouse operation. Basically, you can work with events in the same way that you do in DOM elements.
2. Types of Events
HuTime can handle two types of events: mouse events and HuTime's own events. These types of events are slightly different in terms of event propagation.
(1) Mouse Event
Trigger conditions for this type of events are the same as those for mouse events of DOM elements. Event targets may include basic structures, such as panel collections, panels, and layers, as well as figure objects on layers. However, this type of event uses a HuTime's own mouse event object (HuTime.MouseEvent), which is different from that for DOM elements. The following mouse events are targeted:
click, dblclick, mouseup, mousedown, mousemove, mouseover, mouseout, wheel
(2) HuTime's own Events
This type of events is triggered when the displayed range is changed or the display state of a panel is changed.
- tmoved: Triggered when the displayed range in the t-axis direction is changed or zoomed in or out.
- tlengthchanged: Triggered when the width in the t-axis direction (the height in vertical display mode) is changed.
- vscrolled: Triggered when a tile panel is moved in the v-axis direction.
- porderchanged: Triggered when the order of tile panels is changed.
- pvbreadthchanged: Triggered when the height in the v-axis direction of a tile panel (the width in vertical display mode) is changed.
3. Event Propagation
Events are propagated differently between mouse events and HuTime's own events.
(1) Mouse Event
To capture a mouse operation on a figure or others that is drawn on canvas, captureElement (of the canvas element) of the panel collection object is used to receive the mouse event. From the perspective of the DOM tree, the event target is captureElement, and HuTime deals with it in the target phase of this event. When an event is triggered, captureElement passes control of it to the HuTime object, which traces back the object tree and tries to extract the target object and the type of the event. Next, control is returned to the HuTime object via the capture phase in which the target object is reached, to the target phase at the target object, to the bubbling phase from the traget. When event handling is finished in the object tree, the HuTime object returns control to captureElement. However, the bubbling phase will not occur afterward in the DOM tree because it is prevented in order to avoid unintended behavior.
(2) HuTime's own Events
When a HuTime's own event is triggered, the target object passes control to the HuTime object. After that, control is returned to the HuTime object via the capture phase in which the target object is reached, to the target phase at the target object, to the bubbling phase from the target, then causing the process to end. HuTime's own events are not propagated to the DOM tree.
4. Adding User-defined Event Handling
You can add event handling (listeners) of mouse events and HuTime's own events to an application root, panel collections, panels, layers, and figure objects on a layer through the addEventListener method. You can also specify an event type or listener, and an event phase in the same manner as for the addEventListener which adds user event handling to a DOM element.
obj.addEventListener(type, handler [, useCapture])
Adds event handling.
- Return value
- None
- obj
- Type: HuTime, HuTime.ContainerBase, HuTime.OnLayerObjectBase
- The object for which the event is defined.
- type
- Type: String
- The string that represents the type of the event.
- handler
- Type: Function (function(ev))
- The function to handle the event. The ev argument takes an event object (type: HuTime.Event).
- useCapture
- Type: Boolean
- Specify which phase of the event is used. If true, the capture phase is used; if false, the bubbling phase is used. If omitted, it is set to false (the bubbling phase).
