Complex Modifier Usage

Event Modifiers

Using .with_() to modify event behavior with prevent, stop, debounce, throttle

Prevent Default & Stop Propagation

🎯 What these modifiers do:

prevent=True → Stops browser's default action (form submit, link navigation, etc.)
stop=True → Stops event from bubbling up to parent elements

Try submitting this form - it won't reload the page:

✅ Check console: Form data logged but page didn't reload!

Without prevent=True, the form would submit and reload/navigate away

Click the inner element to see stop propagation in action:

Outer container (click me) → logs 'Outer clicked'

Inner element (click me) → logs 'Inner clicked' ONLY

✓ Clicking inner element won't trigger outer's click handler

Throttling for Performance

Rate-Limited Button

Clicks registered:

⚡ Throttled to 1 click per second maximum

Use throttle for: API calls, scroll events, resize handlers

Keyboard Modifiers

Handle specific key combinations and keyboard events

Key-Specific Handlers

Press Enter to Submit

Press Escape to Clear

Any Key Tracker

Last key:

Advanced Modifier Patterns

Using multiple modifiers together for complex interactions

Special Event Modifiers

Modifiers that control how and when events fire

Click for a one-time welcome message

The 'once' modifier ensures the event only fires on first click

High-Performance Scroll Area

Scroll me! (with passive listener for better performance)

Line 0

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Line 9

Line 10

Line 11

Line 12

Line 13

Line 14

Line 15

Line 16

Line 17

Line 18

Line 19

Scroll position: px

Passive listeners improve scroll performance by not blocking the browser

Modifier Combinations: Safe Form Submission

Combining multiple modifiers for robust form handling

Submit count:

Last submit:

Form uses prevent on submit event, button uses throttle for rate limiting

Form Validation with Modifiers

Validating input and controlling form submission

Real-World Patterns

Practical modifier combinations you'll use in real applications

Auto-Save Pattern

Document Editor with Auto-Save

Status:

Perfect for: Blog editors, note-taking apps, form drafts

Mouse Position Tracker (Throttled)

Move your mouse over this area

Mouse: x=, y=

Best Practices

Use debounce (300-500ms) for search inputs and validation to avoid excessive requests
Use throttle (50-100ms) for high-frequency events like scroll, mousemove, or resize
Combine prevent=True with form submissions to handle them client-side
Use stop=True when you need to prevent event bubbling to parent elements
Use once=True for one-time actions like welcome messages or initial setup
Use passive=True for scroll/touch handlers to improve performance
Always consider the user experience impact of delays (debounce/throttle)

21

Complex Modifiers