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