Event Handling
PulsePoint uses standard HTML event attributes (e.g., onclick, oninput). You can call state setters directly or define custom handler functions.
Inline Handlers
For simple logic, you can execute code directly within the HTML attribute.
counter.html
<div>
<p>Count: {count}</p>
<!-- Direct state manipulation -->
<button onclick="setCount(count + 1)">Increment</button>
<!-- Mouse events -->
<div
onmouseenter="setHover(true)"
onmouseleave="setHover(false)"
>
{isHovering ? 'Hovering!' : 'Hover over me'}
</div>
</div>
<script type="text/pp">
const [count, setCount] = pp.state(0);
const [isHovering, setHover] = pp.state(false);
</script>Handler Functions
As logic grows, move your handlers into the script block. Pass arguments as needed.
notifications.html
<div>
<button onclick="triggerToast('success', 'Saved!')">Save</button>
<button onclick="triggerToast('error', 'Failed!')">Delete</button>
<p>Last Action: {lastMessage}</p>
</div>
<script type="text/pp">
const [lastMessage, setLastMessage] = pp.state("None");
// Custom handler receiving parameters
function triggerToast(type, text) {
console.log(`Type: ${type}`);
setLastMessage(text);
}
</script>Accessing the Event Object
To access the native DOM event (e.g., to get input values or prevent default behavior), pass the global event variable to your handler.
Pro Tip: Always use
event.preventDefault() when handling form submissions to prevent the page from reloading.
form-handler.html
<form onsubmit="handleSubmit(event)">
<input type="text" oninput="handleInput(event)" value="{inputValue}" />
<button type="submit">Submit</button>
</form>
<p>Typing: {inputValue}</p>
<script type="text/pp">
const [inputValue, setInputValue] = pp.state("");
function handleInput(e) {
// Access target value
setInputValue(e.target.value);
}
function handleSubmit(e) {
// Prevent page reload
e.preventDefault();
alert("Form submitted: " + inputValue);
}
</script>