Event modifiers (preventDefault, stopPropagation) in Svelte - Performance & Optimization

Performance: Event modifiers (preventDefault, stopPropagation)

MEDIUM IMPACT

This concept affects how quickly user interactions are processed and how many unnecessary event handlers run, impacting input responsiveness and visual stability.

Preventing default browser behavior and stopping event bubbling on a button click

Svelte

<button on:click|preventDefault|stopPropagation={handleClick}>Click me</button>

<script>
  function handleClick() {
    // other logic
  }
</script>

Svelte compiles event modifiers into optimized code, reducing runtime overhead and ensuring consistent behavior.

📈 Performance GainReduces JS execution steps per event, improving interaction responsiveness.

Preventing default browser behavior and stopping event bubbling on a button click

Svelte

<button on:click={handleClick}>Click me</button>

<script>
  function handleClick(event) {
    event.preventDefault();
    event.stopPropagation();
    // other logic
  }
</script>

Manually calling preventDefault and stopPropagation in the handler adds extra JavaScript execution and can cause confusion if missed.

📉 Performance CostAdds extra JS execution on every click, increasing input delay slightly.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual preventDefault and stopPropagation in handler	No extra DOM ops	0 reflows	Minimal paint	[!OK]
Svelte event modifiers (|preventDefault|stopPropagation)	No extra DOM ops	0 reflows	Minimal paint	[OK] Good

Rendering Pipeline

Event modifiers affect the event handling phase by preventing default actions and stopping event propagation early, reducing unnecessary event processing.

→Event Handling

→JavaScript Execution

⚠️ BottleneckJavaScript Execution due to extra event method calls

Core Web Vital Affected

INP

This concept affects how quickly user interactions are processed and how many unnecessary event handlers run, impacting input responsiveness and visual stability.

Optimization Tips

1Use Svelte's event modifiers to reduce manual JavaScript calls in event handlers.

2Avoid unnecessary event bubbling by applying stopPropagation when appropriate.

3Efficient event handling improves input responsiveness and reduces interaction delays.

Performance Quiz - 3 Questions

What is the main performance benefit of using Svelte's event modifiers like |preventDefault| and |stopPropagation|?

A They add extra DOM nodes to handle events faster.

B They reduce JavaScript execution by compiling optimized event handling code.

C They delay event handling to improve paint times.

D They increase bundle size significantly.

DevTools: Performance

How to check: Record a performance profile while interacting with the button, then inspect the event handler call stack and JS execution time.

What to look for: Look for reduced JavaScript execution time and fewer event method calls with event modifiers compared to manual calls.