Complete Event Handling Example

This example demonstrates comprehensive event handling capabilities in Crafter.CppDOM.

Features

Shows how to handle various types of DOM events using C++
Demonstrates mouse, keyboard, form, and window events
Illustrates proper event listener attachment and callback handling
Shows real-time interaction with UI elements

Event Types Demonstrated

Mouse Events

Click events
Mouse over/out events
Mouse move events

Focus Events

Focus and blur events

Keyboard Events

Key down, up, and press events

Form Events

Change, submit, and input events

Window Events

Load, error, resize, and scroll events

Context menu events

Drag and Drop Events

Drag start, end, and drop events

Usage

import Crafter.CppDOM;
using namespace Crafter::CppDOM;

int main(){
    // Create UI elements
    HtmlElement body("body");
    body.SetInnerHTML("<h1>Complete Event Handling Demo</h1>"
                      "<button id='myButton'>Click Me!</button>"
                      "<input type='text' id='textInput' placeholder='Type something...'>"
                      "<p id='output'>Events will appear here</p>");
    
    // Handle click event
    HtmlElement button("myButton");
    button.AddClickListener([]() {
        HtmlElement output("output");
        output.SetInnerHTML("Button was clicked!");
    });
    
    // Handle keyboard events
    HtmlElement input("textInput");
    input.AddInputListener([]() {
        HtmlElement output("output");
        output.SetInnerHTML("Input changed!");
    });
    
    // Handle form events
    input.AddChangeListener([]() {
        HtmlElement output("output");
        output.SetInnerHTML("Form value changed!");
    });
    
    return 0;
}

Building and Running

crafter-build build executable
run.sh

Then navigate to http://localhost:8080/ in your browser.

If caddy is not installed, you can use your favorite static file server instead.

2 KiB Raw Blame History