Difference between window.onkeypress and window.document.body.onkeypress Last Updated : 02 Jun, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report The onkeypress event can be triggered in JavaScript using both: window.onkeypresswindow.document.body.onkeypress To understand the difference between the two we need to have a look at the HTML DOM (Document Object Model): DOM is a model that represents the HTML document as a tree structure.The tree structure has the root node as a Document object.Other nodes like HTML, HEAD, and BODY have a parent/child relationship with each other.HTML DOM window.onkeypress: The window.onkeypress event is triggered when a key is pressed on the window object. Syntax: window.onkeypress = function(){myScript}; Approach: Using the available window object call window.onkeypress to execute a function.Define the function(in our case myScript()) that you need to execute. Note: Here the selected object is the window object, i.e. the root node of DOM. Example: HTML <!DOCTYPE html> <html> <body> <script> window.onkeypress = function() {myFunction()}; function myFunction() { alert("Hi"); } </script> </body> </html> Output: window.document.body.onkeypress: The window.document.body.onkeypress event is triggered when a key is pressed on the body object. Syntax: window.document.body.onkeypress = function(){myScript}; Approach: Using the available window object call window.onkeypress to execute a function.Define the function(in our case myScript()) that you need to execute. Note: Here the selected object is the body object which is the child of the HTML node which is further the child of the window object, i.e. the root node of DOM. Example: HTML <!DOCTYPE html> <html> <body> <script> window.document.body.onkeypress = function() {myFunction()}; function myFunction() { alert("Hi"); } </script> </body> </html> Output: Difference between the window.onkeypress and window.document.body.onkeypress: S. No. window.onkeypress window.document.body.onkeypress 1 The selected object is the window object, i.e. the root node of DOM.The selected object is the body object which is the child of the HTML node which is further the child of window object, i.e. the root node of DOM.2 The window is all the filewindow.document.body refers to the body tag3 The window is supporting IE4 and above whiledocument.body supports IE6 and above 4.The windows.onkeypress event occurs when the user presses a key on a keyboard.The window.document.body.onkeypress event occurs when the user presses a key on body object. 5. Its supported browsers are -: Chrome , Microsoft Edge, Safari, Opera Mini, firefox Its supported browsers are -: Chrome, Microsoft Edge, Safari, Opera Mini, firefox Conclusion: Though they produce similar output their functionality in terms of selecting the object is different. Comment More infoAdvertise with us Next Article Difference between body.onload() and document.ready() function A amritohri Follow Improve Article Tags : Technical Scripter Difference Between JavaScript Web Technologies Technical Scripter 2020 Web Technologies - Difference Between +2 More Similar Reads Difference between body.onload() and document.ready() function The body.onload() event will be called once the DOM and all associated resources like images got loaded. Basically, onload() will be called when the page has been fully loaded with entire images, iframes and stylesheets, etc. For example, if our page contains a larger size image, so onload() event w 2 min read How are the JavaScript window and JavaScript document different from one another? What is a JavaScript window? The window is at a root/top level at the JavaScript object hierarchy. It is a global/root object in JavaScript and it is the root object of the Document object model(DOM); What is a JavaScript document? A document is an object inside the window object and we use a docume 3 min read Difference Between the Click & Mousedown Events The mousedown and the click event in JavaScript occur when the mouse button is pressed. But the click event handles the button press as well as the button release while mousedown only handles the button click. Some of the important differences between them are listed below. Click EventThe click even 3 min read JavaScript onKeyPress onKeyUp and onKeyDown Events Whenever a key is pressed or released, there are certain events that are triggered. Each of these events has a different meaning and can be used for implementing certain functionalities depending on the current state and the key that is being used. These events that are triggered when a key is press 2 min read Difference between mouseover, mouseenter and mousemove events in JavaScript Events in JavaScript provide a dynamic interface to the webpage. There are wide variety of events such as user clicking, moving the mouse over an element, etc. Events that occur when the mouse interacts with the HTML document falls under the category of MouseEvent property. mouseover: The onmouseove 2 min read Difference between <input type='button' /> and <input type='submit' /> In HTML, <input> elements are widely used to create various form controls. Two common types of <input> elements used for buttons are <input type='button' /> and <input type='submit' />. While both appear similar at first glance, they serve different purposes and have distinct 3 min read Like