Event Handlers

Respond to user interactions seamlessly. From simple clicks to complex direct-to-backend function calls, PulsePoint puts control at your fingertips.

Events are the heartbeat of an interactive application. In Prisma PHP, handlers are functions that execute precisely when specific actions occur—bridging the gap between the user's intent and your system's logic.

User Interaction
Event Handler

Event Reference

Event Attribute Description
onclick Triggered when the element is clicked.
oninput Triggered when user input occurs (typing).
onsubmit Triggered when a form is submitted.
onchange Triggered when an element's value changes.
onfocus / onblur Triggered when an element gains or loses focus.

Passing Data

Event handlers are flexible. You can pass raw values, the DOM element itself via this, or complex JSON objects directly from your HTML attributes.

Quick Tip

PulsePoint automatically serializes objects passed in inline handlers, making it easy to send state data.

HTML
<!-- Pass element reference -->
<button onclick="sayHello(this)">...</button>

<!-- Pass Arguments -->
<button onclick="update('param1', 100)">...</button>

<!-- Pass JSON -->
<button onclick="save({'id': 42})">...</button>

<!-- Capture Input -->
<input oninput="search(event.target.value)" />

Iteration & Events

Combine pp-for with event handlers to create dynamic lists where every item is interactive.

<ul class="space-y-2">
    <template pp-for="user in users">
        <li 
            key="{user.id}" 
            onclick="selectUser(user)"
            class="cursor-pointer hover:bg-muted p-2 rounded"
        >
            {user.name}
        </li>
    </template>
</ul>

Direct Function Invocation

Bypass the boilerplate. Call PHP backend functions directly from your frontend JavaScript using pp.fetchFunction.

Zero Boilerplate

No routers. No controllers. No route definitions. Just define a function and call it.

Server Actions

Treat your PHP functions as direct server actions, keeping logic centralized and secure.

Auto Parsing

Prisma handles the JSON serialization automatically. Arguments arrive as objects.

Backend (PHP)
server-side
<?php
use PP\Validator;

// Callable via frontend
function validateUser($data) {
    $id = Validator::int($data->id);

    if ($id <= 0) {
        return [
            'success' => false,
            'msg' => 'Invalid ID'
        ];
    }

    return [
        'success' => true,
        'msg' => 'Valid ID'
    ];
}
?>
Frontend (JS)
client-side
<script>
    const [id, setId] = pp.state('');
    const [msg, setMsg] = pp.state('');

    async function checkId() {
        // Magic happens here:
        const { response } = await pp.fetchFunction(
            'validateUser', 
            { id }
        );

        if (response.success) {
            setMsg(response.msg); 
        }
    }
</script>

<!-- UI -->
<input value="{id}" oninput="setId(val)" />
<button onclick="checkId()">Check</button>
Important: Make sure callable PHP functions are defined in the file served by the route or loaded beforehand (via your autoloader or an explicit include/require) so they are available when invoked.