UI Events User Interface Events

The UI Events is not directly related to user behavior. The UI Events include:

DomActivate: this event is triggered when an element is activated by certain actions of the user, such as a user's mouse or keyboard event. This event has been abandoned in the DOM3 level event. FF2 + and chrome support, hesitant to implement different mechanisms across browsers, and this event is not recommended.

Load: triggered on the window object after the page is loaded. In frameset, It is triggered after all frames are loaded. when it refers to the img tag, after the image is loaded.

Unload: triggered on the window object after the page is uninstalled. In frameset, It is triggered after all frames are uninstalled. when it refers to the img tag, after the image is uninstalled.

Abort: triggered when an element is not fully loaded before the user stops the download operation.

Error: triggered when javascript error occurs in window, when img cannot be loaded or the object element cannot be loaded, triggered when one or more frames in a frameset cannot be loaded,
Select: this event is triggered when you select one or more characters in textbox.
Resize: triggered when the size of a window or frame is changed.
Scroll: triggered when a user scrolls an element with a scroll bar.
Most HTML events are either related to window objects or form Controls.
To determine whether a browser supports HTML events on DOM2 events, use the following code:
Var isSupport = document. implementation. hasFeature ('htmlevents', '2. 0 ');
If it is implemented on a dom2 event, true is returned; otherwise, false is returned.
Var isSupported = document. implementation. hasFeature ("UIEvent", "3.0 ");
The same is true for dom3.

The load Event

Load events may be the most commonly used in javascript. For a window object, the load event is triggered when the webpage is fully loaded. All in all, any event that occurs on the window can be accessed through the attributes of the body element, because there is no permission to access the window element in HTML.

For an img tag, When you define the src attribute of the img tag, it can also trigger its load event.

As follows:Copy codeThe Code is as follows: EventUtil. addHandler (window, "load", function (){
Var image = new Image ();
EventUtil. addHandler (image, "load", function (event ){
Alert ("Image loaded !");
});
Image. src = “smile.gif ";
});

Other elements also support load events in a non-standard way, such as script tag elements, when a script is dynamically added to IE9 +, FF, Opera, Chrome, and Safari3.0 + and loaded, the load event of the script is triggered, which is different from the img element, the js file is loaded after the src attribute is assigned a value, and this element has been added to the document. Therefore, the order of Event handler is irrelevant to the value assignment of src.
Example:Copy codeThe Code is as follows: EventUtil. addHandler (window, "load", function (){
Var script = document. createElement ("script ");
Script. type = "text/javascript ";
EventUtil. addHandler (script, "load", function (event ){
Alert ("Loaded ");
});
Script. src = "example. js ";
Document. body. appendChild (script );
});

IE and Opera also support link label load events.

The unload Event
The unload event is opposite to the load event, which is triggered when the document is completely uninstalled. A typical example is that the event is triggered when the browser is navigating from one side to another, and this event is usually used to release the memory to avoid unnecessary memory usage. Similar to the load event, the unload event can be created in two ways: js and HTML attributes.
Take extra caution when processing functions of the unload event, because not all objects are available since the unload event is triggered, and the page is still available when it is loaded. An error occurs when you try to operate the Dom node location or change the appearance.

The resize Event

When the length and height of the browser window are changed, the resize event is triggered. This event occurs on the window object. The registration method is the same as that of the first two events.

Similar to other events that occur on the window object, the target of the event in the dom browser refers to document, while IE8 and earlier browsers have no relevant attributes to use.

There are many differences in the resize event in different browsers. in IE safari chrome opera, you only need to modify the value of a pixel, and this event will be triggered. In FF, this event is triggered only when the reset size operation is stopped. This event is also triggered when the browser minimizes its size.

The scroll Event

Although the scroll event occurs on the window object, it also applies to page-level elements. In mixed mode, the corresponding changes are reflected in the scrollLeft and scrollTop attributes of the <body> element. In standard mode, the corresponding changes occur on the <HTML> element, except for safari, other browsers comply with the preceding rules, for example:

Copy codeThe Code is as follows: EventUtil. addHandler (window, "scroll", function (event ){
If (document. compatMode = "CSS1Compat") {// The standard mode is reflected in html.
Alert(document.doc umentElement. scrollTop );
} Else {
Alert (document. body. scrollTop );
}
});