For user event types, the most commonly used are mouse, keyboard, and browser.
1. Mouse Event:
All mouse events are frequently used. The following examples are used to test various mouse events.
The code copy is as follows:
<script language="javascript">
function handle(oEvent) {
var disp = document.getElementById("display");
if (window.event) oEvent = window.event; //handle compatibility and obtain the object
disp.innerHTML += "Mouse event name:" + oEvent.type + "<br>";
}
window.onload = function() {
var oP = document.getElementById("box");
oP.onmousedown = handle;
oP.onmouseover = handle;
oP.onmouseup = handle;
oP.onmouseout = handle;
oP.onclick = handle;
oP.ondblclick = handle;
}
</script>
<div>
<div id="box">
Box content
</div>
<p id="display"></p>
</div>
Mouse key-value button test (with reference table)
The code copy is as follows:
<script language="javascript">
function TestClick(oEvent) {
var oDiv = document.getElementById("display");
if (window.event)
oEvent = window.event;
oDiv.innerHTML += oEvent.button; //Output the value of button
}
document.onmousedown = TestClick;
window.onload = TestClick; //The test has not pressed any keys
</script>
<div>
<p id="display"></p>
</div>
2. Keyboard events
There are not many types of keyboard events, only three types of events.
keydown (press a key, press and hold it will continue to trigger)
keypress (triggered when a key is pressed and a character is generated, that is, it ignores function keys such as Shift, Alt, ctrl)
keyup (triggered when a key is released)
Keyboard listening example:
The code copy is as follows:
<script language="javascript">
function handle(oEvent) {
if (window.event) oEvent = window.event; //handle compatibility and obtain event object
var oDiv = document.getElementById("display");
oDiv.innerHTML += oEvent.type + ""; //Output event name
}
window.onload = function() {
var oTextArea = document.getElementById("textin");
oTextArea.onkeydown = handle; // Listen to all keyboard events
oTextArea.onkeyup = handle;
oTextArea.onkeypress = handle;
}
</script>
<div>
<textarea rows="4" cols="50" id="textin">
</textarea>
<p id="display"></p>
</div>
For the keyboard, the most important thing is not the name of the event, but what key is pressed. Since ie does not have a charCode property, keyCode is the same as the standard dom keycode only when the keydown and keyup events occur.
In keypress events, the following method is used.
The code copy is as follows: oEvent.charCode = (oEvent.type == "keypress")?oEvent.keycode:();
The reason why keyCode is not adopted is because it represents keyboard keys, not output characters. Therefore, output "a" and "A", keycode is equivalent, and charcode is distinguished by characters.
In addition, in keypress, the keycode value of the standard dom is always 0;
Example: Related properties of keyboard events:
The code copy is as follows:
<script language="javascript">
function handle(oEvent) {
var oDiv = document.getElementById("display");
if (window.event) oEvent = window.event; //handle compatibility and obtain event object
//Set the value of ie charcode
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
oDiv.innerHTML += oEvent.type + ":charCode" + oEvent.charCode + "keyCode" + oEvent.keyCode + "<br>"; //Output test
}
window.onload = function() {
var oTextArea = document.getElementById("textin");
oTextArea.onkeydown = handle; // Listen to all keyboard events
oTextArea.onkeypress = handle;
}
</script>
<div>
<textarea rows="4" cols="50" id="textin">
</textarea>
<p id="display"></p>
</div>
3.htm event
For browsers, various html events have their own events, and some of them are often exposed to by users, such as load, error, select, etc. The commonly used html events are as follows:
The load event is one of the commonly used events, because the dom framework has not been built before the page loading is completed, so no related operations can occur.
Assign load to window objects, the unload event is equivalent to the onload and onunload methods marked by the <body>.