What is preventDefault() in JS?

Publish Date: Feb 12 '20

14 3

The preventDefault() method is used on the Event interface. It tells the the user agent (whether that be in the browser, bot, download manager, or another app accessing the Web) that if the event does not get explicitly handled, its default action should not be taken as it normally would be. This means that the default action of an even will not occur when preventDefault() method is used.

The preventDefault() method is used in many different JavaScript frameworks including but not limited to jQuery, React.js, and Angular.js.

You can see and example of it being used with Vanilla JavaScript here .

You can see and example of it being used with jQuery here .

In React.js we can use the preventDefault() method to prevent a browser reload or refresh. You can see and example of it being used with React here .

You can see and example of it being used with Angular here.

PS: This was a question asked on Quora.

Comments 3 total

Tomas SheersFeb 12, 2020

Perhaps you can clarify to me something. If you add an event listener to the click, the event will be passed to your handler function. At this point you can preventDefault. But if you don't call that method, how does the event continue to propagate without an explicit instruction to do so?

To me it seems like if you add an event listener, the handler should then have to explicitly propagate the event instead of vice versa.
- Joe AttardiFeb 12, 2020
  
  You're talking about event propagation which is a little different than default actions.
  
  preventDefault will stop the browser from taking the default action. For example, pressing Enter in an input field inside a form will submit that form. You can add a keydown listener on the form (or keyup, not 100% sure to be honest) and call preventDefault to prevent the form from being submitted.
  
  Event propagation is simply the event bubbling up the DOM hierarchy. For example, suppose you had a keydown listener on that input field. And you also had a keydown listener on some parent div, for example. By default, that event would propagate up from the input field to the div. If you call stopPropagation() that won't happen.
  
  It's a slight difference but I thought it was worth mentioning!
  - Tomas SheersFeb 12, 2020
    
    Thank you for that reply.
    
    I hadn't heard of stopPropagation and hadn't really considered event bubbling. You're reply got me reading all through developer.mozilla.org/en-US/docs/L...
    
    My question wasn't very clear and that Mozilla link, while really useful, also doesn't answer it. So I'll try to rephrase.
    
    If you register an event listener with a handler, you have the option of being passed the event object. When your event handler gets called, when bubbling, does the engine then check to see whether the event handler called preventDefault/stopPropagation to determine whether to pass the event object to the next event handler?
    
    And another question. In the case of, for example, a form. When you click submit and you want to preventDefault with your handler, is there default event handler lower in the chain of progression of the event that we are then blocking, or is it something else?
    
    The way the event gets passed between handlers implicitly seems to be confusing me.
    
    None the less, this article and your reply have been interesting to me.

Add comment

Andrew Jackson @sonandrew

What is preventDefault() in JS?

Comments 3 total