Detailed explanation of UI events in JavaScript event types_javascript skills

"DOM level 3 events" stipulates several types of events

UI events, divided when the user interacts with elements on the page;
Focus event, element gains or loses focus;
Mouse events, perform operations on the page through the mouse;
Scroll wheel event, using mouse wheel or similar device;
Text event, when the user enters text in the document;
Keyboard events, perform operations on the page through the keyboard;
Synthetic event, division when entering characters for IME (Input Method Editor);
Change event (mutation), the underlying DOM structure changes;
Change name event, when the element or attribute name changes, this type of event has been deprecated.
The following focuses on the content of UI events

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

DOMActivate，元素已经被用户操作（鼠标或键盘）激活。已经被废弃。
load，页面完全加载完后在window上触发，所有框架加载完毕后在框架集上触发，图像加载完毕在img元素上触发，当嵌入内容加载完毕在object元素上触发。
unload，页面完全卸载（window），所有框架都卸载后（框架集），嵌入内容卸载完毕后（object）。
abort，当用户停止下载过程，如果嵌入内容没有加载完，则在object元素上除法。
error，当js错误时（window），当无法加载图像时（img），当无法加载嵌入内容时（object），当一或多个框架无法加载（框架集）。
select，当用户选择文本框（texterea或input）中的一个或多个字符时触发。
resize：当窗口或框架的大小变化时（window或框架）
scroll：当用户滚动带滚动条的元素中的内容时（在该元素上触发）

load event

One of the most commonly used events in js is load. When the page is completely loaded (all images, js files, css files, etc.), the load event on the window will be triggered. Such as:

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

Generally speaking, any events that occur on the window can be specified through the corresponding characteristics in the body element, because the window element is not accessible in HTML. This is just a stopgap measure to ensure backward compatibility. Such as:

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

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 window is loaded, an img element is added to the body. After the img element is loaded, the src of the image and a prompt message are prompted:

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

Some browsers also support the load event on the link element so that developers can determine whether the style sheet has been loaded.

unload event

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

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

Care should be taken when writing code in the onunload event handler, because objects that exist after the page is loaded may not exist at this time.

resize event

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

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

Because some browsers trigger this event when the window changes by 1 pixel, and continue to trigger as the window changes; other browsers will only trigger when the user stops resizing the window. Therefore, you should avoid adding a lot of calculation code to the handler of this event to prevent the browser from slowing down its response.

scroll event

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

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

Because the browser is constantly triggered with changes, you should avoid adding a lot of calculation code to the handler of this event to avoid slowing down the browser response.

abort event

Please pay attention to subsequent updates regarding abort, error, select and other events

error event

Please pay attention to subsequent updates regarding abort, error, select and other events

select event

Please pay attention to subsequent updates regarding abort, error, select and other events