GlobalEventHandlers interface

Specify the callback function of the event, the recommended method is the addEventListener method of the element.

div.addEventListener("click", clickHandler, false);

In addition, there is a way to directly specify the callback function of the event.

div.onclick = clickHandler;

This interface is provided by the GlobalEventHandlers interface. Its advantage is that it is more convenient to use, but the disadvantage is that only one callback function can be specified for each event, and it is impossible to specify the phase of the event trigger (capture phase or bubbling phase).

HTMLElement, Document and Window all inherit this interface, that is to say, various HTML elements, document objects, and window objects can use the attributes provided by the GlobalEventHandlers interface. The main event attributes provided by this interface are listed below.

GlobalEventHandlers.onabort

When the abort event (stop loading) of an object occurs, the callback function specified by the onabort property is called.

At present, there is no uniform regulation on how to trigger the stop loading event of various elements. So in fact, this attribute is now generally only used on the <img> element.

// HTML code is as follows
// <img src="example.jpg" id="img">
var img = document.getElementById("img");
img.onabort = function () {
  console.log("image load aborted.");
};

GlobalEventHandlers.onerror

When the error event occurs, the callback function specified by the onerror attribute will be called.

There are two types of error events.

One is the runtime error of JavaScript, which will be passed to the window object, resulting in window.onerror().

window.onerror = function (message, source, lineno, colno, error) {
  // ...
};

The processing function of window.onerror accepts a total of five parameters, which have the following meanings.

-message: error message string -source: the URL of the script that reports the error -lineno: the line number of the error, which is an integer -colno: The column number of the error, which is an integer -error: error object

The other is resource loading error, for example, the resource loaded by <img> or <script> has a loading error. At this time, the Error object will be passed to the corresponding element, causing the element's onerror attribute to start executing.

element.onerror = function (event) {
  // ...
};

Note that in general, resource loading errors will not trigger window.onerror.

GlobalEventHandlers.onload, GlobalEventHandlers.onloadstart

When the element is finished loading, the load event will be triggered, and the onload() will be executed. Its typical usage scenarios are window objects and <img> elements. For the window object, only when all resources of the page are loaded (including all external resources such as pictures, scripts, style sheets, fonts, etc.), the load event will be triggered.

For elements such as <img> and <video>, the loadstart event will also be triggered when loading starts, causing the execution of onloadstart.

GlobalEventHandlers.onfocus, GlobalEventHandlers.onblur

When the current element gains focus, it will trigger element.onfocus; when it loses focus, it will trigger element.onblur.

element.onfocus = function () {
  console.log("onfocus event detected!");
};
element.onblur = function () {
  console.log("onblur event detected!");
};

Note that if it is not an element that can accept user input, to trigger onfocus, the element must have a tabindex attribute.

GlobalEventHandlers.onscroll

When the page or element is scrolled, the scroll event will be triggered, causing the execution of onscroll().

GlobalEventHandlers.oncontextmenu, GlobalEventHandlers.onshow

When the user presses the right button of the mouse on the page, the contextmenu event will be triggered, causing the execution of oncontextmenu(). If the property returns false after execution, it means that the right-click menu is disabled. document.oncontextmenu has the same effect as window.oncontextmenu.

document.oncontextmenu = function () {
  return false;
};

In the above code, the oncontextmenu property returns false after execution, and the right-click menu will not appear.

When the right-click menu of an element is displayed, the onshow monitoring function of the element will be triggered.

Other event attributes

The event properties of the mouse.

-onclick -ondblclick -onmousedown -onmouseenter -onmouseleave -onmousemove -onmouseout -onmouseover -onmouseup -onwheel

The event properties of the keyboard.

-onkeydown -onkeypress -onkeyup

The event attribute of the focus.

-onblur -onfocus

The event properties of the form.

-oninput -onchange -onsubmit -onreset -oninvalid -onselect

The event attributes of the touch.

-ontouchcancel -ontouchend -ontouchmove -ontouchstart

The drag event attributes are divided into two categories: one is related to the dragged element, and the other is related to the container element that receives the dragged element.

The event attribute of the dragged element.

-ondragstart: drag start -ondrag: triggers every few hundred milliseconds during the drag process -ondragend: end of drag

Receive the event attribute of the container element of the dragged element.

-ondragenter: The dragged element enters the container element. -ondragleave: The dragged element leaves the container element. -ondragover: The dragged element is above the container element, which is triggered every few hundred milliseconds. -ondrop: After releasing the mouse, the dragged element is placed into the container element.

The event attribute of the <dialog> dialog element.

-oncancel -onclose