- Introduction
- Keyboard Events
- What Was Pressed?
- Event Propagation and Default Action
- Field-Level Shortcuts
- Document-Level Shortcuts
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Event Propagation and Default Action
Once an event is triggered in the DOM event model, it makes two passes through the object structure of your web page:
- Event processing starts with the event capture phase. The triggered event is first dispatched to the document object and propagated toward the target element. If any of the intervening objects has an event handler registered with the useCapture parameter of the addEventListener method, the event handler is invoked.
- After the target element has been reached, its event handler is invoked (assuming that it has one), and then the event makes a second pass back toward the document element (the event bubbling phase). Yet again, event handlers on all intervening elements are invoked.
The target element of a keyboard event is the currently focused element. It can be a link (A element) or any form element (for example, an INPUT field). If no element of the web page has the focus, the keyboard event is received only by the document object.
Any event handler in the capturing or bubbling chain can decide that it has satisfactorily handled the event and that the capturing or bubbling should stop. The ways to stop the event propagation are browser-dependent, so it’s best to use a wrapper function; for example, the xStopPropagation function from the X Library.
When you stop event propagation, the capturing or bubbling process stops (no more event handlers are invoked), but the browser still handles the key event as usual. For example, if your event handler has detected that the Ctrl-S key combination has been pressed, and has acted on that keypress (for example, by saving the user information), the browser would still open the Save As pop-up window. To intercept the key event completely and stop the browser from performing any action on it, you have to disable the default browser action. Yet again, the details are browser-dependent, and the xPreventDefault function isolates us from them.
The keys that you can intercept with JavaScript are browser-dependent. For example:
- In Firefox 2.0 (and earlier), you can intercept any key combination, including those using Ctrl and Alt keys (even the Alt-F4 key to close the window).
- In Opera, you can intercept all Ctrl keys, but no Alt keys.
- In Internet Explorer, you can intercept some Ctrl keys and the Alt keys that don’t trigger the actions from the menu bar visible in the current window; if you open a pop-up window with no menu bar, you have more control over the Alt keys.
The following control keys cannot be intercepted in Internet Explorer 7.0:
|
Key |
Function |
|
Ctrl-F |
Find |
|
Ctrl-O |
Open a new web page |
|
Ctrl-P |
Print the current web page |
If you want your application to work consistently across all browsers, you’re forced to limit yourself to character shortcuts (similar to Gmail shortcuts) or Ctrl key shortcuts, as you’ll see in the next section.