Using event.preventDefault() in a non-existent event

A common JavaScript/React mistake is trying to call event.preventDefault() when:

1. No event object exists
2. The event parameter wasn’t properly received
3. The code runs outside an event handler context

The Problem

// ❌ Wrong - trying to preventDefault without an event
function handleClick() {
  event.preventDefault(); // 'event' is undefined
}

// ❌ Wrong - typo in parameter name
function handleSubmit(evt) {
  event.preventDefault(); // 'event' vs 'evt'
}

// ❌ Wrong - calling on synthetic React event after timeout
function handleAsyncClick(event) {
  setTimeout(() => {
    event.preventDefault(); // Event is nullified
  }, 1000);
}

Correct Solutions

1. Proper Event Parameter Handling

// ✅ Correct - using the event parameter
function handleClick(event) {
  event.preventDefault();
  console.log('Clicked');
}

// In JSX
<button onClick={handleClick}>Click</button>

2. Safe Event Checking

// ✅ Safe approach with existence check
function handleClick(event) {
  if (event && typeof event.preventDefault === 'function') {
    event.preventDefault();
  }
  // Proceed with logic
}

3. For Async Operations

// ✅ Correct async handling
function handleAsyncClick(event) {
  const { preventDefault } = event; // Capture method
  preventDefault();

  setTimeout(() => {
    // Work with event properties if needed
    console.log(event.type); // But don't use event methods
  }, 1000);
}

Why This Fails

1. Undefined variables: event isn’t magically available
2. React’s SyntheticEvent: Pooled and nullified after handler
3. Typographical errors: Misspelled parameter names
4. Wrong context: Called outside event flow

Common Scenarios

1. Missing Event Parameter

// ❌ Missing parameter
function handleSubmit() {
  event.preventDefault(); // ReferenceError
}

// ✅ Fix
function handleSubmit(event) {
  event.preventDefault();
}

2. Custom Event Handlers

// ❌ Custom handler without event
function customAction() {
  event.stopPropagation(); // No event
}

// ✅ Fix - pass event if needed
function customAction(event) {
  event?.stopPropagation?.();
}

3. Event Pooling in React

function handleClick(event) {
  // ❌ Will fail - React reuses SyntheticEvent
  setTimeout(() => event.preventDefault(), 1000);

  // ✅ Fix - persist or extract values
  event.persist(); // Now works (but avoid if possible)
  // OR
  const { target } = event; // Extract needed values
}

Best Practices

1. Always declare event parameter explicitly
2. Check event existence before calling methods
3. Avoid async event methods – extract values instead
4. Use TypeScript for parameter type safety

   function handleClick(event: React.MouseEvent) {
     event.preventDefault();
   }

5. Consider custom events with proper interfaces when needed

Debugging Tips

1. Add null checks:

   console.log('Event exists?', !!event);
   console.log('preventDefault exists?', event?.preventDefault);

2. Check error stack traces for where undefined is accessed
3. Verify event types in React:

   console.log(event.nativeEvent.constructor.name);