UI event detail in JavaScript event type

"DOM3 events" specifies the following types of events

UI events, division when the user interacts with elements on the page;
Focus event, in which an element gains or loses focus;
Mouse events, through the mouse on the page to perform operations;
Wheel events, using mouse wheel or similar devices;
Text events, when the user enters text in the document;
Keyboard events, through the keyboard on the page to perform operations;
Compositing event, when entering characters for IME (Input Method Editor, input method editor);
Change event (mutation), the underlying DOM structure changes;
Change name events, which are discarded when the element or attribute name changes.
The following highlights the contents of the UI event

UI events refer to those that are not necessarily related to user actions.

DOMActivate The element has been activated by the user action (mouse or keyboard). It has been abandoned. 
load , after the page is fully loaded window Is triggered on the frame set after all frames are loaded, and the image is loaded on the frame set img Element when embedded content is loaded at object Element. 
unload , the page is completely uninstalled ( window ), after all frames have been unloaded (frameset), after the embedded content has been unloaded ( object ). 
abort , when the user stops the download process, if the embedded content has not been loaded, then the object Element upper division. 
error when js Error ( window ), when the image cannot be loaded ( img ), when the embedded content cannot be loaded ( object ), when 1 Or more than one frame cannot be loaded (frameset). 
select , when the user selects the text box ( texterea or input ) in the 1 Triggered when one or more characters. 
resize : When the size of a window or frame changes ( window Or framework) 
scroll : When the user scrolls the contents of an element with a scroll bar (triggered on that element) 

load event

One of the most common events in js is load, which fires the load event above window when the page is fully loaded (all images, js files, css files, and so on). Such as:

window.onload = function () {
  console.log('loaded');
}

In general, any events that occur on window can be specified in the body element by corresponding characteristics, as the window element cannot be accessed in HTML. This is just a quick fix to ensure backward compatibility. Such as:

document.body.onload = function () {
  console.log('loaded');
}

It can also be used on image elements:

var img = document.getElementById("img");
img.onload = function () {
  console.log(event.target.src);
}

Another example is the following code: after the loading of window, add 1 img element to body, and prompt src and 1 prompt message after the loading of img element:

window.onload = function () {
  var image = document.createElement("img");
  document.body.appendChild(image);
  image.src = "scr.png"
  image.onload = function () {
    console.log(event.target.src);
    console.log('img is loaded');
  };
}

In addition, the script element also supports load events in a non-standard way.

Some browsers also support load events on link elements so that developers can determine if the stylesheet is fully loaded.

unload event

This event is triggered when the document is completely unloaded. The unload event occurs whenever a user switches from one page to another.

window.onunload = function () {
  alert("8888");
}

You should be careful about writing code in the onunload event handler, because objects that exist after the page loads will not necessarily exist at this point.

resize event

This event is triggered when the browser window is adjusted to a new height or width.

window.onresize = function () {
  console.log(document.body.clientWidth);
}

Because some browsers trigger this event when they change 1 pixel in the window, they will trigger it continuously as they change. Other browsers only fire when the user stops resizing the window. So you should avoid putting a lot of computation code in the handler of this event to prevent the browser from being slow.

scroll event

Although this event occurs on the window object, it actually represents a change in the response element on the page. In hybrid mode, changes are monitored by scrollLeft and scrollTop of body elements. In non-standard mode, all browsers except Safari reflect this change through the html element (documentElement) :

window.onscroll = function () {
  console.log(document.documentElement.scrollTop || document.body.scrollTop);
}

Because the browser fires as it changes, you should avoid putting a lot of computation code in the handler of this event to prevent the browser from reacting slowly.

abort event

For abort, error, select and other events, please pay attention to the following update

error event

Regarding abort, error, select and other events, please pay attention to the following update

select event

For abort, error, select and other events, please pay attention to the following update