demonstrates how to prevent that from happening: The following example demonstrates how invalid text input can be stopped from reaching And how to capitalize on that? . event.preventDefault() const form = event.currentTarget const formElements = form.elements as typeof form.elements & { usernameInput: HTMLInputElement } onSubmitUsername(formElements.usernameInput.value) } But even with those changes, I'm not a fan of this for three reasons: It's a bit verbose and distracts from the main purpose of the function The box is now red. The event.preventDefault () method stops the default action of an element from happening. This allows us to pass the method custom arguments instead of the native event: Sometimes we also need to access the original DOM event in an inline handler. This page was last modified on Apr 7, 2023 by MDN contributors. Event listeners that handle multiple kinds of events may want to check cancelable before invoking their preventDefault() methods. Next.js + GraphQL + GraphQL CodeGenerator + PrismaTodo. What sort of contractor retrofits kitchen exhaust ducts in the US? For example, this can be useful when: Clicking on a "Submit" button, prevent it from submitting a form Clicking on a link, prevent the link from following the URL Note: Not all events are cancelable. meaning that any default action normally taken by the implementation as a result of the if (event.dataTransfer != undefined) { const textData = event.dataTransfer.getData ('text'); } Or simply (note the ?) rev2023.4.17.43393. Visit Mozilla Corporations not-for-profit parent, the Mozilla Foundation.Portions of this content are 19982023 by individual mozilla.org contributors. Use the // `this` inside methods points to the current active instance, , // now we have access to the native event, , , , ,