Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to use load events in javascript". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

One of the most common events in JavaScript is load. When the page is fully loaded (including all external resources such as images, JavaScript files, CSS files, and so on), the load event on the window is triggered. There are two ways to define onload event handlers.

The first way is to use the JavaScript code as follows:

EventUtil.addHandler (window, "load", function (event) {

Alert ("Loaded!")

});

This is how event handlers are specified through JavaScript, using the cross-browser EventUtil object defined earlier in this chapter. As with other events, an event object is passed in to the event handler. The event object does not contain any additional information about this event, but in DOM-compatible browsers, the value of the event.target property is set to document, and IE does not set the srcElement property for this event. The second way to specify the onload event handler is to add an onload attribute to the element, as shown in the following example:

Load Event Example

In this way, a warning box is displayed when the image in the example is loaded. The same function can be achieved using JavaScript, for example:

Var image = document.getElementById ("myImage")

EventUtil.addHandler (image, "load", function (event) {

Event = EventUtil.getEvent (event)

Alert (EventUtil.getTarget (event) .src)

});

Here, the onload event handler is specified using JavaScript. The event object is also passed in, although it does not contain any useful information. However, the goal of the incident is

Element, so this information can be accessed and displayed through the src attribute. Before creating a new

Element, you can assign an event handler to it so that it can be prompted when the image is loaded. At this point, it is most important to specify the event before specifying the src property, as shown in the following example.

EventUtil.addHandler (window, "load", function () {

Var image = document.createElement ("img")

EventUtil.addHandler (image, "load", function (event) {

Event = EventUtil.getEvent (event)

Alert (EventUtil.getTarget (event) .src)

});

Document.body.appendChild (image)

Image.src = "smile.gif"

});

In this example, the onload event handler is first specified for window. The reason is that we want to add a new element to DOM, so we have to make sure that the page is loaded-- if you manipulate document.body before the page loads, it will cause an error. Then, a new image element is created and its onload event handler is set. Finally, the image is added to the page and its src property is set. One thing to note here is that new image elements do not have to be downloaded after they are added to the document, as long as the src property is set.

The same functionality can be achieved through the use of DOM0-level Image objects. Before DOM, developers often used Image objects to preload images on the client side. It can be like using the

Element uses the Image object, except that it cannot be added to the DOM tree. Let's look at an example.

EventUtil.addHandler (window, "load", function () {

Var image = new Image ()

EventUtil.addHandler (image, "load", function (event) {

Alert ("Image loaded!")

});

Image.src = "smile.gif"

});

Here, we use the Image constructor to create an instance of the new image, and then assign an event handler to it. Some browsers implement Image objects as

Elements, but this is not true for all browsers, so it is best to treat them differently. Other elements also support load events in a non-standard way. In IE9+, Firefox, Opera, Chrome, and Safari 3 + and later, the element also triggers the load event so that the developer can determine whether the dynamically loaded JavaScript file has finished loading. Unlike an image, the JavaScript file does not begin to be downloaded until the src property of the element is set and added to the document. In other words, it doesn't matter for the element to specify the order of the src attribute and the event handler. The following code shows how to specify an event handler for an element.

EventUtil.addHandler (window, "load", function () {

Var script = document.createElement ("script")

EventUtil.addHandler (script, "load", function (event) {

Alert ("Loaded")

});

Script.src = "example.js"

Document.body.appendChild (script)

});

This example uses a cross-browser EventUtil object to specify an onload event handler for the newly created element. At this point, the target property of the event object in most browsers refers to a node, while in versions prior to Firefox 3, it referred to document. Load events on elements are not supported in IE8 and earlier versions.

IE and Opera also support load events on elements so that developers can determine whether the stylesheet has been loaded. For example:

EventUtil.addHandler (window, "load", functio

EventUtil.addHandler (window, "load", function () {

Var link = document.createElement ("link")

Link.type = "text/css"

Link.rel= "stylesheet"

EventUtil.addHandler (link, "load", function (event) {

Alert ("css loaded")

});

Link.href = "example.css"

Document.getElementsByTagName ("head") [0] .appendChild (link)

});

Like nodes, the stylesheet does not start downloading until the href attribute is specified and elements are added to the document.

That's all for "how to use load events in javascript". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.