Basic DOM tutorials-event types

Basic DOM tutorials-event types

The most common types of user events are the mouse, keyboard, and browser.

1. mouse events:

Mouse events are frequently used. The following example shows how to test various mouse events.

 

The Code is as follows:

<Script language = "javascript">
Function handle (oEvent ){
Var disp = document. getElementById ("display ");
If (window. event) oEvent = window. event; // processing compatibility, get 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" style = "width: 100px; height: 100px; background: # ddd;">
Box content
</Div>
<P id = "display"> </p>
</Div>

 

Test the key-value button of the mouse (see the comparison table)

 

The Code 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 the button.
}
Document. onmousedown = TestClick;
Window. onload = TestClick; // test without pressing any key
</Script>
<Div>
<P id = "display"> </p>
</Div>

 

2. Keyboard Events

There are not many types of Keyboard Events, but only three types of events.

Keydown (press a key and hold it until it is triggered continuously)

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

Keyup (triggered when a key is released)

Keyboard listening example:

 

The Code is as follows:

<Script language = "javascript">
Function handle (oEvent ){
If (window. event) oEvent = window. event; // processing compatibility, get the 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 event name, but the key that is pressed. Because ie does not have the charCode attribute, the keyCode is the same as the standard dom keycode only when the keydown and keyup events occur,

The keypress event is equivalent to the keycode, so the following method is used.

 

The Code is as follows:

OEvent. charCode = (oEvent. type = "keypress ")? OEvent. keycode :();

 

KeyCode is not used because it represents the keyboard buttons, rather than the output characters. Therefore, the output values of "a" and "A" are equivalent, and charcode is distinguished by characters.

In keypress, the standard dom's keycode value is always 0;

Example: attributes of a keyboard event:

 

The Code is as follows:

<Script language = "javascript">
Function handle (oEvent ){
Var oDiv = document. getElementById ("display ");
If (window. event) oEvent = window. event; // processing compatibility, get the 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 types of html have their own events, and some are also frequently accessed by users, such as load, error, and select. Common html events are as follows:

 

The load event is one of the common events, because the dom framework has not been built before the page loading is complete, so no related operations can occur.

Assign load to the window object. The unload event is equivalent to the onload and onunload Methods marked by <body>.