window.onkeypress与window.document.body.onkeypress差异及重复触发问题咨询

Hey there! Let's unpack what's happening with your code and the differences between those two event bindings.

Why You're Seeing Duplicate Events #

First off, the duplicate triggers are caused by event bubbling. When a keypress event fires on an element inside the <body>, it bubbles up through the DOM tree: starting from the element that received the key press, then to its parent, all the way up to <body>, then document, and finally window. Since you've bound captureKeyPress to both window.onkeypress and document.body.onkeypress, the same event gets handled twice—once when it reaches the body, once when it reaches the window.

Key Differences Between the Two Bindings #

Let's break down how these two bindings differ:

• Target Element:

  • window.onkeypress is attached to the global window object, the top-level context for the browser tab.
  • document.body.onkeypress is attached specifically to the <body> DOM element.

• Event Trigger Scope:

  • window.onkeypress will fire for any keypress event that bubbles up to the window—this includes events from every focusable element on the page (inputs, buttons, etc.), as long as the event isn't stopped from bubbling.
  • document.body.onkeypress will fire when the event reaches the <body> element. If an element stops the event propagation (using event.stopPropagation()), the event won't reach the window, but will still trigger the body's handler if it makes it that far.

• Legacy Browser Compatibility:
  Your guess about IE7/IE9 compatibility is spot-on! Back in the days of older IE versions, event handling was inconsistent. Some versions had trouble capturing keypress events at the window level, so developers would bind the handler to both body and window to ensure the event was caught regardless of the browser's quirks. Modern browsers (Chrome, Firefox, Edge, etc.) handle event bubbling consistently, so this redundant binding is no longer necessary.

About GlobalEventHandlers.onkeypress #

The GlobalEventHandlers interface is a web API that defines event handler properties (like onkeypress, onclick) implemented by many DOM elements—including window, document, and body. So both window.onkeypress and document.body.onkeypress are just instances of this interface attached to different nodes in the DOM tree. The core behavior of the onkeypress handler is the same; the difference lies in which node is listening for the bubbled event.

Fixing Your Code #

To eliminate the duplicate events, simply remove one of the bindings. Pick either:

this.listen = function() {
    window.onkeypress = this.captureKeyPress;
    // Remove the body binding, or vice versa
}

Or:

this.listen = function() {
    window.document.body.onkeypress = this.captureKeyPress;
    // Remove the window binding
}

For modern browsers, binding to window or document is generally more reliable if you want to capture all keypress events across the page, since the body might not always be the full height of the viewport (leading to rare cases where focus is outside the body).

内容的提问来源于stack exchange，提问作者Fylix