Event Modifiers

Event modifiers in WakaPAC provide fine-grained control over event behavior. Using the data-pac-event attribute, you can prevent default actions, stop propagation, and filter keyboard events to create responsive, intuitive user interfaces.

The basics

Behavioral modifiers:

  • prevent - Calls event.preventDefault()
  • stop - Calls event.stopPropagation()

Keyboard filters (only for keyup/keydown):

  • enter - Only trigger on Enter key
  • escape or esc - Only trigger on Escape key
  • space - Only trigger on Space bar
  • tab - Only trigger on Tab key
  • delete or del - Only trigger on Delete key
  • up, down, left, right - Arrow keys

Behavioral Modifiers

Behavioral modifiers control how events interact with the browser and DOM:

  • prevent - Calls event.preventDefault() to stop the browser's default action (form submission, link navigation, etc.)
  • stop - Calls event.stopPropagation() to prevent the event from bubbling up to parent elements
<div id="app">
    <!-- prevent: Stop form from submitting to server -->
    <form data-pac-bind="submit: handleSubmit" data-pac-event="prevent">
        <input data-pac-bind="value: username" placeholder="Username">
        <button type="submit">Login</button>
    </form>

    <!-- stop: Prevent event from bubbling to parent -->
    <div data-pac-bind="click: handleOuter" style="padding: 20px; background: lightblue;">
        Outer (will trigger)
        <div data-pac-bind="click: handleInner" data-pac-event="stop"
             style="padding: 20px; background: lightcoral;">
            Inner (stops propagation)
        </div>
    </div>

    <p>{{message}}</p>
</div>

<script>
    wakaPAC('#app', {
        username: '',
        message: '',

        handleSubmit() {
            this.message = `Logging in as: ${this.username}`;
        },

        handleOuter() {
            this.message = 'Outer clicked';
        },

        handleInner() {
            this.message = 'Inner clicked (outer won\'t trigger)';
        }
    });
</script>

Keyboard Filters

Keyboard filters only trigger the event handler when a specific key is pressed. These modifiers work exclusively with keyup and keydown events - if the specified key isn't pressed, the handler won't execute at all.

<div id="app">
    <!-- enter: Add task on Enter key -->
    <input data-pac-bind="value: task, keyup: addTask"
           data-pac-event="enter"
           placeholder="Press Enter to add">

    <!-- escape: Close modal on Escape -->
    <input data-pac-bind="keyup: closeModal"
           data-pac-event="escape"
           placeholder="Press Esc to close">

    <!-- Arrow keys: up, down, left, right -->
    <input data-pac-bind="keydown: navigate"
           data-pac-event="up down left right"
           placeholder="Use arrow keys">

    <!-- space, tab, delete -->
    <button data-pac-bind="keyup: togglePlay" data-pac-event="space">
        Press Space
    </button>

    <ul data-pac-bind="foreach: tasks" data-pac-item="task">
        <li>{{task}}</li>
    </ul>
</div>

<script>
    wakaPAC('#app', {
        task: '',
        tasks: [],

        addTask() {
            if (this.task.trim()) {
                this.tasks.push(this.task);
                this.task = '';
            }
        },

        closeModal() {
            console.log('Modal closed');
        },

        navigate(event) {
            console.log('Arrow key pressed:', event.key);
        },

        togglePlay() {
            console.log('Space pressed');
        }
    });
</script>

Combining Modifiers

Multiple modifiers can be combined by separating them with spaces. This allows you to both filter events (keyboard modifiers) and control their behavior (prevent/stop) in a single declaration. Behavioral modifiers execute first, then keyboard filters determine if the handler should run.

<div id="app">
    <!-- Multiple behavioral modifiers -->
    <form data-pac-bind="submit: handleSubmit" data-pac-event="prevent stop">
        <button type="submit">Submit</button>
    </form>

    <!-- Keyboard filter + behavioral modifier -->
    <input data-pac-bind="keydown: submit"
           data-pac-event="enter prevent">

    <input data-pac-bind="keyup: handleEscape"
           data-pac-event="escape stop">
</div>