UI events in JavaScript event types _javascript Tips

The "DOM3-level event" prescribes several categories of events

UI event, division when the user interacts with the element on the page;
Focus event, Element gain or loss of focus;
Mouse events, through the mouse on the page to perform operations;
Wheel event, using mouse wheel or similar device;
Text event, when the user enters text in the document;
Keyboard events, through the keyboard on the page to perform operations;
Composite event, when input Word characters Division for IME (input Method Editor, input methods editor);
Change events (mutation), the structure of the underlying DOM changed;
Change name event, when an element or attribute name changes, such events are discarded.
The content of the UI event is highlighted below

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

Domactivate, the element has been activated by user action (mouse or keyboard). has been abandoned.
load, the page is completely loaded on the window after the trigger, all frames loaded on the frame set to trigger, the image loaded on the IMG element triggered, when the embedded content loaded on the object element triggered.
unload, page full Uninstall (window), all frames are unloaded (frameset), after the embedded content is unloaded (object).
Abort, when the user stops the download process, if the embedded content is not finished loading, division on the object element. Error when
JS Error (window) when the image cannot be loaded (IMG) When embedded content cannot be loaded (object) when one or more frames fail to load (frameset).
Select, which is triggered when the user selects one or more characters in a text box (Texterea or input).
Resize: When the size of a window or frame changes (Windows or frames)
Scroll: When the user scrolls through the contents of the element with the scrollbar (triggered on that element)

Load Event

JS the most commonly used event is load, when the page completely loaded (all images, JS files, CSS files, etc.), will trigger the window above the Load event. Such as:

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

In general, any event that occurs above a window can be specified by the corresponding feature in the BODY element because the window element cannot be accessed in HTML. This is just a stopgap to ensure backwards 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);
}

Also like the following code, after the window loaded, want to add an IMG element, after the IMG element loaded and then prompted the image of SRC and a hint message:

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 supports the Load event in a non-standard way.

Some browsers also support the Load event on the link element so that the developer can determine whether the style sheet is loaded.

Unload events

This event is triggered after the document has been uninstalled completely. The Unload event occurs whenever a user switches from one page to another.

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

You should carefully write the code in the OnUnload event handler, because those objects that exist after the page is loaded do not necessarily exist at this time.

Resize Events

The event is triggered when the browser window is resized to a new height or width.

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

Some browsers trigger the event as it changes 1 pixels in the window, and the browser triggers only when the user stops resizing the window. So you should avoid adding a lot of code to the handler of this event to avoid slow browser response.

Scroll events

This event occurs on the Window object, but actually represents a change in the response element in the page. In promiscuous mode, the changes are monitored by the scrollleft and scrolltop of the body elements, and in non-standard mode, all browsers except safari reflect the change through HTML elements (documentelement):

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

Because browsers are constantly triggered by changes, you should avoid adding a lot of code to the handlers of this event to avoid slower browser responses.

Abort Events

For abort, error, select events, please follow up on the update

Error Event

For abort, error, select events, please follow up on the update

Select Event

For abort, error, select events, please follow up on the update