Event Handler

This document provides an in-depth overview of event handlers in Prisma PHP and how they respond to user actions to create interactive applications.

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them if desired. Event handlers are functions that execute when those events occur.

Event Handler Table

Event Attribute	Description
onclick	Triggered when the element is clicked.
ondblclick	Triggered when the element is double-clicked.
onmousedown	Triggered when a mouse button is pressed.
onmouseup	Triggered when a mouse button is released.
onmouseover	Triggered when the pointer enters the element.
onmousemove	Triggered when the pointer moves within the element.
onmouseout	Triggered when the pointer leaves the element.
onwheel	Triggered when the mouse wheel rotates.
onkeypress	Triggered when a key is pressed and released.
onkeydown	Triggered when a key is pressed down.
onkeyup	Triggered when a key is released.
onfocus	Triggered when element receives focus.
onblur	Triggered when element loses focus.
onchange	Triggered when value changes.
oninput	Triggered when user input occurs.
onsubmit	Triggered when a form is submitted.

Sending Params

Event handlers can receive parameters using arguments, JSON, name attributes or form elements.


<button onclick="sayHello(this)">
  By passing this as a parameter to the function in a JavaScript environment,
  you're referencing the DOM element itself.
</button>

<button onclick="sayHello('param1', 'param1')">
  Sending arguments format
</button>

<button onclick="sayHello({'id': 'yourID'})">
  Sending JSON format
</button>

<input
  name="user"
  oninput="searchUser"
  type="search"
  placeholder="Search user..."
/>

<form onsubmit="createUser">
  <input name="user" placeholder="User name" />
</form>

Default JavaScript Event Execution

JavaScript functions always execute before PHP ones. If JavaScript exists, PHP will not run.

Using the this Keyword


export function togglePasswordVisibility(element) {
  const passwordInput = document.getElementById('password');
  const visibilityIcon = document.getElementById('visibility');
  const visibilityOffIcon = document.getElementById('visibility-off');

  element.ariaLabel =
    passwordInput.type === 'password'
      ? 'Hide password'
      : 'Show password';

  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';

    visibilityIcon.classList.add('hidden');
    visibilityOffIcon.classList.remove('hidden');
  } else {
    passwordInput.type = 'password';

    visibilityIcon.classList.remove('hidden');
    visibilityOffIcon.classList.add('hidden');
  }
}

Calling PHP and JavaScript Together


<div class="space-y-2">
  <Label for="password">Password</Label>

  <div class="relative">
    <Input
      id="password"
      type="password"
      placeholder="Enter your password"
      required
    />

    <Button
      type="button"
      variant="ghost"
      size="icon"
      class="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
      onclick="togglePasswordVisibility(this)"
      aria-label="Hide password">

      <Visibility id="visibility" class="size-4" />
      <VisibilityOff id="visibility-off" class="size-4 hidden" />

    </Button>
  </div>
</div>

<script>
export function togglePasswordVisibility(element) {
  const passwordInput = document.getElementById('password');
  const visibilityIcon = document.getElementById('visibility');
  const visibilityOffIcon = document.getElementById('visibility-off');

  element.ariaLabel =
    passwordInput.type === 'password'
      ? 'Hide password'
      : 'Show password';

  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';

    visibilityIcon.classList.add('hidden');
    visibilityOffIcon.classList.remove('hidden');
  } else {
    passwordInput.type = 'password';

    visibilityIcon.classList.remove('hidden');
    visibilityOffIcon.classList.add('hidden');
  }
}
</script>

<button
  onclick="sayHello('param1','param2')"
  pp-after-request="getSayHelloResponse">
  Send Params and Execute PHP + JS
</button>

<script>
export function getSayHelloResponse(data) {
  alert(`${data.response.args[0]}, ${data.response.args[1]}`);
}
</script>

Form & Input Event Handlers


<?php

function handleSingleCheckboxChange($data) 
  echo 'is checked: ' . $data->completed->checked;


function handleSelectChange($data) 
  echo 'Selected sport: ' . $data->sports;


function handleFormSubmit($data) 
  echo "Name: " . $data->name;


?>

<input type="checkbox" name="completed" onchange="handleSingleCheckboxChange" />

<select name="sports" onchange="handleSelectChange">
  <option value="football">Football</option>
  <option value="basketball">Basketball</option>
</select>

<form onsubmit="handleFormSubmit">
  <input name="name" />
  <button type="submit">Submit</button>
</form>