UI Events User interface events_javascript skills

UI Events are not directly related to user behavior. UI Events include the following:

DomActivate: This event is triggered when an element is activated by some user behavior, such as the user's mouse or keyboard event. This event has been abandoned in DOM level 3 events. It is supported by FF2 and chrome. Due to the differences in cross-browser implementation mechanisms, the use of this event is not recommended.

Load: On the window object, it is triggered after the page is loaded. On the frameset, it is triggered after all the frames are loaded. When it refers to the img tag, it is triggered after the image is loaded, etc.

Unload: On the window object, it is triggered after the page is unloaded. On the frameset, it is triggered after all the frames are unloaded. When it refers to the img tag, it is triggered after the image is unloaded, etc.

abort: Triggered when an element is not completely loaded and before the user stops the download operation.

error: Triggered when an error occurs in the window's JavaScript, triggered when the img cannot be loaded, or the object element cannot be loaded, triggered when one or more frames in the frameset cannot be loaded,
Select: This event is triggered when the user selects one or more characters in the textbox.
Resize: Triggered when the window or frame is resized.
Scroll: Triggered when the user scrolls an element with a scroll bar.
The vast majority of HTML events are either related to the window object or the form control.
To determine whether a browser supports HTML events on DOM2 level events, you can use the following code:

　　var isSupport = document.implementation.hasFeature('HTMLEvents','2.0');

If implemented on DOM2 level events, it will return true. Otherwise, return false

　　var isSupported = document.implementation.hasFeature(“UIEvent”, “3.0”);

The same applies to dom3 level.

The load Event

The load event may be the most commonly used in javascript. For the window object, when the web page is completely loaded, the load event is triggered. In summary, any events that occur 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 the img tag, when you specify the src attribute of the img tag, its load event can also be triggered.

as follows:

EventUtil.addHandler(window, “load”, function(){ 
var image = new Image(); 
EventUtil.addHandler(image, “load”, function(event){ 
alert(“Image loaded!”); 
}); 
image.src = “smile.gif”; 
});

There are also other elements that support load events in a non-standard way, such as script tag elements. When running in IE9, FF, In Opera, Chrome, and Safari 3.0, when script is added dynamically and the loading is completed, the load event of the script will be triggered. Unlike the img element, the js file starts loading after the src attribute is assigned, and this element has been added to the document. Therefore, the order of event handlers has nothing to do with src assignment.
Examples are 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 the load event of the link tag.

The unload Event
The opposite of the load event is the unload event. This event is triggered when the document is completely unloaded. A typical example is that this event is triggered when the browser navigates from one page to another, and this event is usually used to release memory and avoid unnecessary memory occupation. Similar to the load event, the unload event can be created in two ways, namely through js and through HTML attributes.
Be extra careful with the unload event handler, because since the unload event is fired, not all objects are available and are still available when the page is loaded. An error will occur if you try to manipulate the position or change the appearance of a Dom node.

The resize Event

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

Like other events that occur on the window object, the target of this event in the DOM browser refers to the document, and there are no relevant attributes available in IE8 and earlier versions of the browser.

There are many differences in the resize event in different browsers. In IE safari chrome opera, as long as the value of a pixel is modified, the event will be triggered. In FF, this event is only triggered when the resize operation stops. And maximizing and minimizing the browser will also trigger this event.

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 element; in standard mode, the corresponding changes occur in the element. Except for Safari, other browsers comply with the above rules. , for example:

EventUtil.addHandler(window, “scroll”, function(event){ 
if (document.compatMode == “CSS1Compat”){//标准模式反映在html上。 
alert(document.documentElement.scrollTop); 
} else { 
alert(document.body.scrollTop); 
} 
});

The above is the content of UI Events User Interface Events_javascript skills. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!