Understand focusin and mousedown


So for this have to separate something? I mean like focusin can be used for input fields? And mousedown only for button elements? I just got in my head really not have to use this same both times as is useless?

Any explain idea?


Click on the empty white-space in the preview. Then press TAB button. that will ‘focus’ on the input and turn it red. then if you click it will turn green.

Take a look at the example here; notice how the background is yellow when you click on either input box. https://www.w3schools.com/jquery/event_focusin.asp

1 Like

mousedown is a half click, it applies to anything mouse clicks on. Normally you want to use click instead, so user have a chance to change his mind, because in order to click event to fire both mousedown and mouseup should be on top of the same element. You can try it yourself: point mouse to any link, press mouse, then move mouse away and un-press - everyone deserves a second chance :slight_smile:

focus can be use used on any focusable element, natively on input, button, a etc. as well as any other element you program to be focusable by using tabindex=0.

More here:

1 Like

And what about order event like both? So first is mousedown after the click event? and mouseup? Or this not correct? Like can not use mousedown after use click?


You really shouldn’t post duplicate posts, it’s quite confusing

What’s your final goal with the input? If you want to change border on focus, then in CSS:

input :focus {
  border: 2px solid red;
/* If you want to get rid of blue outline then add this: */
input {
  outline: none;

It looks like you’re overcomplicating things for yourself

1 Like


Well that blue border is not want to show always do the focusout one? So this case just on input not possible event that mouseup event?