Focus/Blur: methods and events

  1. The focus method
  2. Tabindex
  3. The blur event and method
  4. Non-bubbling
  5. Delegation with focus
    1. onblur
  6. Removing the dotted border on focused elements
  7. Summary

The focus event triggers when a visitor focuses on an element.

Not all elements are focusable by default. For example, INPUT and all types or form fields support this event, A supports it. As a counterexample, DIV doesn’t support focus.

Event delegation

  1. The Ba gua example
  2. The menu example
  3. The nested menu example
  4. Actions in the markup
  5. Summary

The event delegation helps to simplify event handling by smart use of bubbling. It is one of the most important JavaScript patterns.

Keyboard events

  1. Test stand {#test-stand}
  2. Key event properties
  3. Processing the character: keypress
  4. Cancelling user input
    1. Demo: char-uppercasing input
  5. Working with scan-codes: keydown/keyup
    1. Scan codes VS char codes
    2. Special actions
  6. Tasks and examples

Keyboard events is one of wilder parts of frontend development. There are inconsistencies and cross-browser problems.

But still there are recipes which help to cope with ordinary situations easily.

Obtaining the event object

  1. W3C way
  2. Internet Explorer way
  3. Cross-browser solution
    1. The inline variant
  4. Summary

The event object is always passed to the handler and contains a lot of useful information what has happened.

Bubbling and capturing

  1. Bubbling
    1. this and
    2. Stopping the bubbling
  2. Capturing
  3. Summary

DOM elements can be nested inside each other. And somehow, the handler of the parent works even if you click on it’s child.

The reason is event bubbling.

The default browser action

  1. Cancel the browser action
  2. Browser’s “before” actions
  3. Handlers are independent
  4. Summary

A browser has its own “default” behavior for certain events.

For instance:

  • a click on the link causes navigation,
  • a right-button mouse click shows the context menu,
  • enter on a form field cases it’s submission to the server, etc.