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.
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.
<!-- 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.
<?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' ]; } ?>
<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>
include/require) so they are available when invoked.