DOM basic tutorial event types_basic knowledge

For user event types, the most commonly used are mouse, keyboard, and browser.

1. Mouse events:

Mouse events are frequently used. The following example tests various mouse events

Copy code The code is as follows: 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 " "; } 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; } box content

Mouse key value button test (with comparison table)

Copy code

The code is as follows: function TestClick(oEvent) { var oDiv = document.getElementById("display"); If (window.event) oEvent = window.event; oDiv.innerHTML = oEvent.button; //Output button value } document.onmousedown = TestClick; window.onload = TestClick; //Testing that no key is pressed

2. Keyboard events

There are not many types of keyboard events, only three types of events.

keydown (press a key and hold it down to trigger continuously)

keypress (triggered when a key is pressed and a character is generated, that is, function keys such as Shift, Alt, ctrl, etc. are ignored)

keyup (triggered when a key is released)

Keyboard monitoring example:

Copy code The code is as follows: function handle(oEvent) { If (window.event) oEvent = window.event; // Treatment compatibility, obtain event objects 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; }

For the keyboard, the most important thing is not the name of the event, but what key was pressed. Since IE does not have a charCode attribute, and the keyCode is the same as the standard DOM keycode only when the keydown and keyup events occur, Is equivalent to keycode in keypress event, so the following method is used.

Copy code

The code is as follows: oEvent.charCode = (oEvent.type == "keypress")? oEvent.keycode:(); The reason why keyCode is not used is because it represents keyboard keys, not output characters. Therefore, when outputting "a" and "A", keycode is equivalent, and charcode is distinguished by characters. In addition, in keypress, the keycode value of standard DOM is always 0; Example: Keyboard event related properties:

Copy code

The code is as follows: function handle(oEvent) { var oDiv = document.getElementById("display"); If (window.event) oEvent = window.event; // Treatment compatibility, obtain event objects //Set the value of ie charcode oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0; oDiv.innerHTML = oEvent.type "：charCode" oEvent.charCode "keyCode" oEvent.keyCode " "; //Output test } window.onload = function() { var oTextArea = document.getElementById("textin"); oTextArea.onkeydown = handle; //Listen to all keyboard events oTextArea.onkeypress = handle; }

3.htm event For browsers, various HTML events have their own events, some of which are often encountered by users, such as load, error, select, etc. Commonly used HTML events are as follows:

The load event is one of the commonly used events, because before the page is loaded, the DOM framework has not been built, so no related operations can occur.

Assign load to the window object, and the unload event is equivalent to the onload and onunload methods of the tag.