在HTML中能否使用preventDefault方法？纯HTML中如何像React那样绑定onSubmit事件并访问event对象以阻止默认行为？

Hey there! Let's tackle your questions about preventing default behavior in HTML:

1. Can preventDefault() be used in HTML? #

Absolutely! preventDefault() is a core method of the DOM Event interface—it's not exclusive to React or any other framework. You can use it in plain HTML/JavaScript to stop any default browser action tied to an event (like form submission, link navigation, etc.).

2. How to prevent form default behavior in plain HTML (and access the event object)? #

You have two straightforward approaches to replicate the React onSubmit behavior in vanilla HTML:

Option 1: Inline event handler with explicit event parameter #

Just like React, you can attach an onsubmit attribute directly to the <form> tag. The key difference is you need to explicitly pass the event object to your handler function:

<form onsubmit="handleFormSubmit(event)">
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

<script>
function handleFormSubmit(event) {
  // Stop the default form submission
  event.preventDefault();
  
  // Now you can access the event object for other tasks, like getting form data
  const formData = new FormData(event.target);
  console.log('Form data:', Object.fromEntries(formData));
}
</script>

Option 2: Add event listener via JavaScript (separation of concerns) #

If you prefer keeping your HTML and JS separate (a common best practice), use addEventListener to bind the submit event to your form:

<form id="myForm">
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  // Prevent default submission
  event.preventDefault();
  
  // Access the event object here
  console.log('Submitted form:', event.target);
  // Add your custom logic (like AJAX submission) here
});
</script>

Both methods let you access the full event object, just like in React—you can use it to get form elements, stop propagation with stopPropagation(), and more.

内容的提问来源于stack exchange，提问作者Ivan Ivanchenko