This is the 24th day of my participation in Gwen Challenge

The event type

  • UI events
  • “Event”
  • Mouse events
  • Wheel events
  • The text event
  • Keyboard events
  • Synthetic events
  • Change event

UI events

UI events are events that are not necessarily related to user interaction. These events predate the DOM specification, and for backward compatibility, the existing UI events are as follows:

  • DOMActivate: indicates that it is activated by a user operation. Deprecated in DOM3, but still supported by FireFox 2+ and Chrome.
  • Load: when the page is fully loadedwindowTriggered on the frameset when all frames are loaded, and on the frameset when images are loaded<img>Element, or when the embedded content has finished loading<object>Element above.
  • Unload: When a page is completely unloadedwindowFired on the frameset after all frames have been unloaded, or when the embedded content has been unloaded<object>Element above.
  • Abort: When the user stops the download process, if the embedded content has not finished loading, the<object>On the trigger.
  • Error: whenjavascriptWhen an error occurswindowAbove trigger, picture cannot load in<img>Element when the embedded content cannot be loaded in<object>Element, or when one or more frames cannot load on a frameset.
  • Select: When the user selects the text box (<input>or<textarea>) when one or more characters are triggered.
  • Resize: when the size of a window or frame changeswindowTop trigger.
  • Scroll: triggered when the user scrolls an element that can be scrolled.<body>The element contains a scroll bar for the page being loaded.

Most of these events are related to window objects or form controls.

The load event

One of the most commonly used events in javascript is the Load event. When the page is fully loaded (including all images, javascript files, CSS, and other external resource files), the load event on the window is triggered. Here are two ways to use the load event.

  • The first way

Use the following javascript code:

// Create an EventUtil that is compatible with DOM2 and DOM0 level and IE event methods
const EventUtil = {
    addHandler: (ele, type, handler) = > {
        if(ele.addEventListener) {
            ele.addEventListener(type, handler, false);
        } else if(ele.attachEvent) {
            ele.attachEvent("on" + type, handler)
        } else {
            ele["on"+ type] = hanlder; }},removeHandler: (ele, type, handler) = > {
        if(ele.removeEventListener) {
            ele.removeEventListener(type, handler, false);
        } else if(ele.detachEvent) {
            ele.detachEvent("on" + type, handler)
        } else {
            ele["on" + type] = hanlder;
        }
    }
}

EventUtil.addHandler(window.'load'.(e) = > {
    console.log('loaded', e);
});
Copy the code
  • The second way

Add an onload feature to the element by specifying the onload event handler, as shown in the following example:

<! DOCTYPEhtml>
<html>
<head>
    <title>load example</title>
</head>
<body onload="alert('loaded! ')">
</body>
</html>
Copy the code

This method is implemented in HTML, so it can be compatible with all browsers, and we do not need to manually compatible, but it is not recommended.

// Image can also be used in this way<img src="demo.png" onload="alert(loaded!) " >
Copy the code

In the same way, if you need to listen to whether the image is loaded, the following javascript is recommended:

EventUtil.addHandler(window."load".() = > {
    const image = new Image();
    EventUtil.addHandler(image, "load".() = > {
        alert("image loaded!")}); image.src ="demo.png";
});
Copy the code

reference

[1] Javascript advanced programming