JavaScript Advanced Programming---event object three

Progress events

Progress events are used to describe the process of an event's progress, such as the process of an HTTP request made by an XMLHttpRequest object, , <audio>, <video>, <style>, < Link> the process of loading external resources. Progress events occur for both download and upload.

There are several progress events.

• Abort event: Triggered when a progress event is aborted. If an error occurs that causes the process to abort, the event is not triggered.

• Error event: Triggered when an error causes a resource to fail to load.

• Load event: Triggered at the end of a successful progress.

• Loadstart event: Triggered at the start of a schedule.

• Loadend event: Triggered when progress is stopped, the order of occurrence is followed by the Error event \abort event \load event.

• Progress event: When the operation is in progress, it is continuously triggered by the transmitted data block.

• Timeout event: The progress exceeded the time limit trigger.

Image.addeventlistener (' Load ', function (event) {  image.classList.add (' finished ');}); Image.addeventlistener (' Error ', function (event) {  Image.style.display = ' None ';});

The above code adds a value of "finished" to the class attribute of the picture element after the picture element is loaded. If the load fails, the style of the picture element is set to not display.

Sometimes, picture loading is done before the script runs, especially if the script is placed at the bottom of the page, so it is possible that the listener function for the load and error events will not be executed at all. Therefore, the more reliable way is to use the complete property first to determine whether the load is completed.

function loaded () {  //code after image loaded}if (image.complete) {  loaded ();} else {  Image.addeventlistener (' Load ', loaded);}

Because the DOM does not provide a property like the complete property to determine if a load error occurred, the Listener function of the error event is best placed in the HTML attribute of the IMG element to ensure that a loading error is performed completely.

The error event has a special nature that does not bubble. Such a design is correct to prevent the parent element from raising the Error event listener function.

Progress events are represented using the Progressevent object. The Progressevent instance has the following properties.

• Lengthcomputable: Returns a Boolean value that indicates whether the current progress has a computable length. If False, indicates that the current progress cannot be measured.

• Total: Returns a numeric value that represents the overall length of the current progress. If you are downloading a resource over HTTP, it indicates the length of the content itself, without the length of the HTTP header. If the Lengthcomputable property is false, the total property cannot get the correct value.

• Loaded: Returns a numeric value that represents the quantity that the current progress has completed. The attribute is divided by the total attribute, which gives you a percentage of the current progress.

var xhr = new XMLHttpRequest (), Xhr.addeventlistener ("Progress", UpdateProgress, False), Xhr.addeventlistener ("Load", Transfercomplete, False); Xhr.addeventlistener ("Error", transferfailed, False); Xhr.addeventlistener ("Abort", Transfercanceled, False); Xhr.open (); function UpdateProgress (e) {  if (e.lengthcomputable) {    var PercentComplete = e.loaded/e.total;  } else {    Console.log (' cannot calculate progress ');}  } function Transfercomplete (e) {  console.log (' transmit end ');} function transferfailed (evt) {  console.log (' Error occurred during transfer ');} function transfercanceled (evt) {  console.log (' User canceled transfer ');}

The listener function of the Loadend event can be used to replace the listener function of the Abort event/load event/error event.

Req.addeventlistener ("Loadend", Loadend, False); function Loadend (e) {  console.log (' transfer ended, success failed unknown ');}

　　

The Loadend event itself does not provide a reason for the end of the schedule, but it can be used to do some of the actions that are required for all progress end scenarios.

In addition, the above is a progress event for the download process, and there are progress events in the upload process. All listener functions are then placed above the Xmlhttprequest.upload object.

var xhr = new XMLHttpRequest (); Xhr.upload.addEventListener ("Progress", updateprogress, false); Xhr.upload.addEventListener ("Load", Transfercomplete, False); Xhr.upload.addEventListener ("Error", transferfailed, FALSE); Xhr.upload.addEventListener ("Abort", transfercanceled, False); Xhr.open ();

The browser provides a progressevent constructor that is used to generate an instance of a progress event.

Progressevent = new Progressevent (type, {  lengthcomputable:abooleanvalue,  loaded:anumber,  total: Anumber});

In the above code, the first parameter of the Progressevent constructor is the event type (string), the second parameter is the configuration object, which is used to specify the Lengthcomputable property (the default is False), the loaded property (the default value is 0), The Total property (the default value is 0).

Drag events

Drag refers to the user pressing the mouse button on an object, dragging it to another location, and then releasing the mouse button to place the object there.

There are several types of dragged objects, including element nodes, pictures, links, selected text, and so on. In an HTML page, except that the element node is not dragged by default, other (images, links, selected text) can be dragged directly. In order for the element node to be dragged, you can set the Draggable property of the node to true.

<div draggable= "True" >  this area can be dragged </div>

　　

0

JavaScript Advanced Programming---event object three