Of Stack

Full resolution of jQuery $of document.ready of and JavaScript onload events

  • 2021-06-28 08:27:47
  • OfStack

The operations on elements and binding to events need to wait for an appropriate time, as can be seen in the following examples: 


<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-1</title>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert(" Element has been loaded  !");
}
/* Execution error */
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

If this happens, an event is bound to div#panel before waiting for the element to load, and an error occurs in the browser Console: TypeError:

document.getElementById(...) is null

Change the timing of 1 time, the following three programs are able to successfully bind events, clicking on the element will pop up the corresponding alert ().

Put the event binding in body, after the element:

Since the binding event is after the element, you can successfully get the element of div#panel and bind the click event on div#panel. 


<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-2</title>
</head>
<body>
<div id="panel">click me.</div>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert(" Element has been loaded  !");
}
/* Execute correctly */
</script>
</body>
</html>

Put event binding in window.onload for event binding:

The handler for the window.onload event does not execute until all elements on the page have been loaded, so it is also possible to fetch elements and bind events here. 


<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-2</title>
</head>
<body>
<div id="panel">click me.</div>
<script type="text/javascript">
document.getElementById("panel").onclick = function () {
alert(" Element has been loaded  !");
}
/* Execute correctly */
</script>
</body>
</html>
jQuery Of ready() Method Pass in Method of Binding Event :
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-3</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
document.getElementById("panel").onclick = function () {
alert(" Element has been loaded  !");
}
/* Execute correctly */
});
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

jQuery $(document). ready() and window.onload

http://api.jquery.com/ready/, according to the API () method.

This method receives an ready (handler) parameter of type function. The method is used to: Specify a function to execute when the DOM is fully loaded. This method is executed when DOM is loaded. Since only document's state ready is followed,Operations on elements are safe. $(document). ready() executes only once when DOM is ready, but can bind ready events multiple times.

Compared with ready, the load event waits until page rendering is complete, that is, until all resources (such as pictures) are fully loaded. $.window). load (function (){...}) will wait for the whole page, not only DOM, but also when the images and iframes are ready to execute. ready () is executed when DOM is ready, that is, when the DOM tree is built. So usually ready () is a better time.

If the ready() method is called after DOM initialization is complete, the new handler passed in will execute immediately.

Note: The ready () method is called multiple times, and the incoming handler method is executed in tandem (appended). In JavaScript, window.onload is assigned a method, that is, the latter overrides the former.

Three abbreviations of $(document). ready()

$( document ).ready(handler)
$().ready(handler)//(this is not recommended)
$(handler)

window object and document object

The Window object represents a window opened in a browser: http://www.w3school.com.cn/jsref/dom_obj_window.asp
The Document object represents the HTML document loaded into the browser: http://www.w3school.com.cn/jsref/dom_obj_document.asp

Event object

Event is an event that represents various states: http://www.w3school.com.cn/jsref/dom_obj_event.asp

Event handles allow us to attach a few actions and handles when an event occurs, such as what happens when a button clicks on the event. The reference link above contains a list of attributes that can be used to define the behavior of the event. The onload of interest in this article is one of the events.

onload Event

onload event: http://www.w3school.com.cn/jsref/event_onload.asp

The onload event occurs immediately after loading. (Note that l is lowercase.)

The tags supporting the event are: < body > , < frame > , < frameset > , < iframe > , < img > , < link > , < script >

The JavaScript objects supporting this event are: image, layer, window. Note that there is no document here.

onload Usage Resolution

The most common is window.onload, which waits until the entire page and various resources are loaded before executing the function behavior assigned later. In addition, onload can be used in tags, such as: 


<body onload="inlineBodyOnloadTimeCounter();">

inlineBodyOnloadTimeCounter() is a custom JavaScript function.

Note that there is one paragraph in the API document for jQuery ready():

The .ready() method is generally incompatible with the attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.

Note: ready () method and < body onload="" > Incompatible.

Related articles: