HelPHP Javascript Documentation

Class: H_event

H_event

Manages all DOM and custom events for the application.
Provides static methods for adding, removing, dispatching, and handling events.
Handles mouse, keyboard, touch, pen tablet, drag, drop, resize, and custom events.

Its main purpose is to permit to add multiple callbacks on one event.
To do that, inline event attributes like onclick, are transformed (except on A tag) by h.php class, as js events stored in h.e.events_listeners.

Secondary, this class unify them , to manage a simple "click", with a mouse, a pen, a touch handler etc... scripts become often so big !
What about drag&drop on a touch system and a mouse or a touch pad ? This class unify them all, for all kind of deviceS.
to switch event activation on dom element without removing it look at H_dom.disable_mouse_events and H_dom.enable_mouse_events in dom.js

take a look too to shortcut functions at the end of the class.
Used as h.libs.event or h.e.

new H_event()

events.js, line 28

Methods

staticH_event.add_event(dom_element, event_name, callback, use_capture, evall){boolean|undefined}

events.js, line 690
Adds an event listener to a DOM element.
Handles duplicate prevention and delayed registration.
Name Type Default Description
dom_element HTMLElement Target element.
event_name string Event type.
callback function | string Callback function or string to eval.
use_capture boolean optional Use capture phase.
evall boolean false optional If true, eval the callback.
Returns:
Type Description
boolean | undefined True if added, false if duplicate.

staticH_event.add_event_click(dom_element, callback, use_capture, evall)

events.js, line 1908
Adds a click event listener to a DOM element.
Name Type Default Description
dom_element HTMLElement The element.
callback function Callback function.
use_capture boolean optional Use capture phase.
evall boolean false optional If true, eval the callback.

staticH_event.add_event_click_outside(dom_element, callback, use_capture, evall)

events.js, line 1941
Add a click outside event listener to a DOM element.
H_event.other_inside_elements is an array to save other HTMLElement to handle the click like it was inside.
Name Type Default Description
dom_element HTMLElement The element.
callback function Callback function.
use_capture boolean | null Use capture phase.
evall boolean false optional If true, eval the callback.

staticH_event.add_event_dbl_click(dom_element, callback, use_capture, evall)

events.js, line 1919
Adds a double-click event listener to a DOM element.
Name Type Default Description
dom_element HTMLElement The element.
callback function Callback function.
use_capture boolean optional Use capture phase.
evall boolean false optional If true, eval the callback.

staticH_event.add_event_delayed(dom_element, event_name, callback, use_capture, delay)

events.js, line 772
Adds an event listener with a delay.
Why a delay ? to avoid accident trigerring, if we add event on same dom_element that trigger the add_event.
Name Type Description
dom_element HTMLElement Target element.
event_name string Event type.
callback function Callback function.
use_capture boolean Use capture phase.
delay number Delay in ms.

staticH_event.add_event_key(dom_element, callback, use_capture, evall)

events.js, line 1930
Adds a keyup event listener to a DOM element.
Name Type Default Description
dom_element HTMLElement The element.
callback function Callback function.
use_capture boolean optional Use capture phase.
evall boolean false optional If true, eval the callback.

staticH_event.add_load_handler(handler, evall)

events.js, line 211
Adds a handler to be called on window load.
If the window is already loaded, executes immediately.
Name Type Default Description
handler function | string Handler function or string to eval.
evall boolean false optional If true, eval the handler.

staticH_event.add_resize_handler(handler, evall)

events.js, line 277
Adds a handler to be called on window resize.
Name Type Default Description
handler function | string Handler function or string to eval.
evall boolean false optional If true, eval the handler.

staticH_event.apply_event(event_name, event, other_event)

events.js, line 786
Applies an event to all registered handlers for the event name.
Handles outside events, bubbling, and nested listeners.
Name Type Description
event_name string Event type.
event Event The event.
other_event Event optional Optional related event.

staticH_event.bind_callback(source_class_instance, callback){function}

events.js, line 547
Binds a callback to a class instance and caches it.
Useful for event handlers to preserve 'this' context.
Name Type Description
source_class_instance Object The class instance.
callback function The callback function.
Returns:
Type Description
function The bound callback.

staticH_event.broadcast_event(event_name, data, from)

events.js, line 584
Broadcasts an event to all listeners.
Optionally restricts to listeners from a specific sender. if from is not specified, all elements listening to an event with the name specified in event_name will be invoked!
Name Type Description
event_name string Name of the event.
data * Data to send.
from Object optional Sender object (optional).

staticH_event.check_resize(event){boolean}

events.js, line 1337
Checks if the mouse is near a resizable border. Updates resize_data and cursor.
Name Type Description
event Event The event.
Returns:
Type Description
boolean True if resize should start.

staticH_event.detect_mouse_buttons(event)

events.js, line 421
Detects which mouse buttons are pressed. Updates H_event.mouse state.
Name Type Description
event MouseEvent | PointerEvent The event.

staticH_event.disable_drag(dom_element)

events.js, line 1538
Disables dragging for a DOM element.
Name Type Description
dom_element HTMLElement The element.

staticH_event.disable_drop(dom_element)

events.js, line 1818
Disables drop events on a DOM element.
Name Type Description
dom_element HTMLElement | Document The element or document.

staticH_event.disable_event_callback(event){boolean}

events.js, line 455
Prevents default event behavior.
Name Type Description
event Event The event.
Returns:
Type Description
boolean Always false to block callbacks...

staticH_event.disable_resize(dom_element)

events.js, line 1286
Disables resizing for a DOM element.
Name Type Description
dom_element HTMLElement The element.

staticH_event.disable_scroll_on_touch(event){boolean}

events.js, line 1752
Prevents scrolling on touch devices during drag/resize.
actually similar to H_event.prevent_default(), but it was not the case in the past.
so perhaps it will change again in the future...
so keeped for compatibility reason.
Name Type Description
event TouchEvent The event.
Returns:
Type Description
boolean Always false.

staticH_event.drag(event, b)

events.js, line 1602
Handles dragging of a DOM element during mouse move.
Name Type Description
event Event The event.
b boolean Unused.

staticH_event.drag_end(event)

events.js, line 1708
Ends drag operation.
Name Type Description
event Event The event.

staticH_event.enable_drag(dom_element, start_handler, move_handler, end_handler, avatar_handler){boolean}

events.js, line 1493
Enables dragging for a DOM element.
Sets up handlers and optional avatar to represent the moving element.
all handlers are callbacks to call at each moment of the drag& drop : start, move, end, and can be replaced by null.
the end_handler can used to replace the drop event on the target.
Name Type Description
dom_element HTMLElement The element.
start_handler function | Object Start handler or settings object.
move_handler function Move handler.
end_handler function End handler.
avatar_handler function | string Avatar handler or string.
Returns:
Type Description
boolean True if enabled.

staticH_event.enable_drop(dom_element, callback){boolean}

events.js, line 1786
Enables drop events on a DOM element.
Name Type Description
dom_element HTMLElement | Document The element or document.
callback function Drop callback.
Returns:
Type Description
boolean True if enabled.

staticH_event.enable_resize(dom_element, start_resize_handler, resize_handler, end_resize_handler, border_detection_size)

events.js, line 1267
Enables resizing for a DOM element.
By default, the border detection size is 10 px, and you can use the right and bottom border to resize.
It's better practice to display this border, and set the overflow style property of the dom element to hidden
Sets up handlers and border detection.
Name Type Default Description
dom_element HTMLElement The element.
start_resize_handler function null Start handler.
resize_handler function null Resize handler.
end_resize_handler function null End handler.
border_detection_size number 10 optional Border size in px.

staticH_event.end_global_move(event)

events.js, line 1214
Ends global move tracking for drag/resize.
Name Type Description
event Event The event.

staticH_event.end_resize(event)

events.js, line 1425
Ends resize operation.
Name Type Description
event Event The event.

staticH_event.extract_data_from_drop_event(event, filter){Object}

events.js, line 1853
Extracts data from a drop event.
Supports files, HTML, and text.
Name Type Description
event DragEvent | CustomEvent The event.
filter Array optional Types to filter.
Returns:
Type Description
Object Extracted data.

staticH_event.global_drop(event)

events.js, line 1770
Handles global drop events.
Calls the default drop callback if set.
Name Type Description
event DragEvent | CustomEvent The event.

staticH_event.global_key_down(event)

events.js, line 335
Handles global keydown events.
Updates key state and applies EVENT_KEYDOWN.
Name Type Description
event KeyboardEvent The keydown event.

staticH_event.global_key_up(event)

events.js, line 353
Handles global keyup events.
Updates key state and applies EVENT_KEYUP.
Name Type Description
event KeyboardEvent The keyup event.

staticH_event.global_mouse_down(event)

events.js, line 371
Handles global mousedown or pointerdown events.
Detects mouse buttons, initializes drag/resize, and applies EVENT_MOUSEDOWN.
Name Type Description
event MouseEvent | PointerEvent The event.

staticH_event.global_mouse_move(event)

events.js, line 1117
Handles global mouse or pointer move events.
Updates drag/resize state and triggers mouse enter/leave.
Name Type Description
event MouseEvent | PointerEvent The event.

staticH_event.global_mouse_up(event)

events.js, line 465
Handles global mouseup or pointerup events.
Detects clicks end, double clicks end, and applies EVENT_MOUSEUP.
Name Type Description
event MouseEvent | PointerEvent The event.

staticH_event.handler_event(event)

events.js, line 760
Internal event handler that applies the event to registered callbacks.
Name Type Description
event Event The event.

staticH_event.has_drag(dom_element){boolean}

events.js, line 1528
Checks if a DOM element has drag enabled.
Name Type Description
dom_element HTMLElement The element.
Returns:
Type Description
boolean True if draggable.

staticH_event.has_drop(dom_element){boolean|number}

events.js, line 1836
Checks if a DOM element has drop enabled.
Name Type Description
dom_element HTMLElement | Document The element or document.
Returns:
Type Description
boolean | number True/1 if enabled, 0 if not.

staticH_event.has_event(dom_element, event_name){boolean}

events.js, line 967
Checks if a DOM element has a listener for a specific event.
Name Type Description
dom_element HTMLElement The element.
event_name string Event type.
Returns:
Type Description
boolean True if found.

staticH_event.has_event_callback(dom_element, event_name, callback){boolean}

events.js, line 988
Checks if a DOM element has a specific callback for an event.
Name Type Description
dom_element HTMLElement The element.
event_name string Event type.
callback function Callback function.
Returns:
Type Description
boolean True if found.

staticH_event.init()

events.js, line 172
Initializes global event listeners for mouse, touch, keyboard, resize, and load events.
Detects platform and sets up appropriate handlers.

staticH_event.init_drag(dom_element)

events.js, line 1571
Initializes drag operation for a DOM element.
launched by global_mouse_down
Name Type Description
dom_element HTMLElement The element.

staticH_event.init_mouse_down_event(event)

events.js, line 431
Initializes the current mousedown event and computes offsets.
Name Type Description
event MouseEvent | PointerEvent The event.

staticH_event.init_resize(mouse_down_event){boolean}

events.js, line 1306
Initializes resize operation.
launched by global_mouse_down
Name Type Description
mouse_down_event Event The mousedown event.
Returns:
Type Description
boolean True if resize started.

staticH_event.is_resizable(dom_element){boolean}

events.js, line 1296
Checks if a DOM element is resizable.
Name Type Description
dom_element HTMLElement The element.
Returns:
Type Description
boolean True if resizable.

staticH_event.listen_to_event(to, event_name, callback, from)

events.js, line 616
Registers a listener for an event.
Optionally restricts to events from a specific sender.
if from is not specified, all elements listening to an event with the name specified in event_name will be invoked.
Name Type Description
to Object Target object.
event_name string Name of the event.
callback function Callback function.
from Object optional Sender object (optional).

staticH_event.mouse_interacting(){boolean}

events.js, line 267
Returns true if mouse is interacting (dragging, resizing, etc).
Returns:
Type Description
boolean True if interacting.

staticH_event.prevent_default(event)

events.js, line 1250
Prevents default event behavior only.
Name Type Description
event Event The event.

staticH_event.remove_all_events(dom_element){boolean}

events.js, line 1058
Removes all event listeners from a DOM element.
Name Type Description
dom_element HTMLElement The element.
Returns:
Type Description
boolean True if removed.

staticH_event.remove_event(dom_element, event_name, callback){boolean}

events.js, line 1010
Removes a specific event listener from a DOM element.
Name Type Description
dom_element HTMLElement The element.
event_name string Event type.
callback function Callback function.
Returns:
Type Description
boolean True if removed.

staticH_event.remove_event_click(dom_element, callback)

events.js, line 1952
Removes a click event listener from a DOM element.
Name Type Description
dom_element HTMLElement The element.
callback function Callback function.

staticH_event.remove_event_click_outside(dom_element, callback)

events.js, line 1979
Removes a click outside event listener from a DOM element.
Name Type Description
dom_element HTMLElement The element.
callback function Callback function.

staticH_event.remove_event_dbl_click(dom_element, callback)

events.js, line 1961
Removes a double-click event listener from a DOM element.
Name Type Description
dom_element HTMLElement The element.
callback function Callback function.

staticH_event.remove_event_key(dom_element, callback)

events.js, line 1970
Removes a keyup event listener from a DOM element.
Name Type Description
dom_element HTMLElement The element.
callback function Callback function.

staticH_event.remove_load_handler(handler)

events.js, line 238
Removes a handler from the window load handlers list.
Name Type Description
handler function Handler to remove.

staticH_event.remove_resize_handler(handler)

events.js, line 301
Removes a handler from the window resize handlers list.
Name Type Description
handler function Handler to remove.

staticH_event.resize(event)

events.js, line 1437
Handles resizing of a DOM element during mouse move.
Name Type Description
event Event The event.

staticH_event.send_event(dom_element, type, data, bubbles, cancelable)

events.js, line 648
Dispatches a DOM or custom event on an element.
Name Type Default Description
dom_element HTMLElement Target element.
type string Event type.
data * optional Event detail data.
bubbles boolean true optional Whether the event bubbles.
cancelable boolean true optional Whether the event is cancelable.

staticH_event.send_event_click(dom_element, data, bubbles, cancelable)

events.js, line 1993
Dispatches a click event on a DOM element.
Name Type Description
dom_element HTMLElement The element.
data * optional Event detail data.
bubbles boolean optional Whether the event bubbles.
cancelable boolean optional Whether the event is cancelable.

staticH_event.send_event_click_outside(dom_element, data, bubbles, cancelable)

events.js, line 2026
Dispatches a click outside event on a DOM element.
Name Type Description
dom_element HTMLElement The element.
data * optional Event detail data.
bubbles boolean optional Whether the event bubbles.
cancelable boolean optional Whether the event is cancelable.

staticH_event.send_event_dbl_click(dom_element, data, bubbles, cancelable)

events.js, line 2004
Dispatches a double-click event on a DOM element.
Name Type Description
dom_element HTMLElement The element.
data * optional Event detail data.
bubbles boolean optional Whether the event bubbles.
cancelable boolean optional Whether the event is cancelable.

staticH_event.send_event_key(dom_element, data, bubbles, cancelable)

events.js, line 2015
Dispatches a keyup event on a DOM element.
Name Type Description
dom_element HTMLElement The element.
data * optional Event detail data.
bubbles boolean optional Whether the event bubbles.
cancelable boolean optional Whether the event is cancelable.

staticH_event.set_default_drop_callback(callback)

events.js, line 1762
Sets the default drop callback for drag-and-drop.
Name Type Description
callback function Callback function.

staticH_event.set_drag_area(dom_element, area_dom_element, padding)

events.js, line 1548
Sets a drag area dom element for a DOM element.
Name Type Default Description
dom_element HTMLElement The element.
area_dom_element HTMLElement Area element.
padding number 0 optional Padding in px.

staticH_event.start_global_move(dom_element, move_handler, end_move_handler)

events.js, line 1097
Starts tracking global mouse/touch movement for drag/resize.
Name Type Description
dom_element HTMLElement Target element.
move_handler function Move handler.
end_move_handler function End handler.

staticH_event.stop_event(event){boolean}

events.js, line 1230
Stops event propagation and default behavior.
Name Type Description
event Event The event.
Returns:
Type Description
boolean Always false.

staticH_event.unset_drag_area(dom_element)

events.js, line 1560
Unsets the drag area for a DOM element.
Name Type Description
dom_element HTMLElement The element.

staticH_event.window_load(event)

events.js, line 252
Executes all registered window load handlers.
Sets window_loaded to true.
Name Type Description
event Event The load event.

staticH_event.window_resize(event)

events.js, line 315
Executes all registered window resize handlers.
Also marks the body rect as dirty.
Name Type Description
event Event The resize event.