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. |
on* attributes only. A hyphenated form such as
on-click is not an event — on a component boundary it is hydrated as an
onClick prop. The runtime injects
event, e, $event,
target, currentTarget and
el into every handler, and rebinds handlers after each DOM morph.
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.rpc.
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\Attributes\Exposed;
use PP\Validator;
// Private by default - this attribute is what makes it callable
#[Exposed]
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() {
// Resolves with the PHP return value itself
const response = await pp.rpc(
'validateUser',
{ id }
);
if (response.success) {
setMsg(response.msg);
}
}
</script>
<!-- UI -->
<input value="{id}" oninput="setId(event.target.value)" />
<button onclick="checkId()">Check</button>