C Event Object
i > In the IE browser, the event object is an attribute event of the window object. The access method is as follows:
Copy the codeThe code is as follows:
function getEvent(){
var o_event = ;
}
The event object is accessed when an event occurs and disappears after executing the function.
ii > In standard DOM, event objects are obtained as the only parameter of the handler function. The access method is as follows:
Copy the codeThe code is as follows:
function getEvent(_event){
var o_event = _event
}
Therefore, in order to be compatible with various browsers, the following methods are usually adopted:
Copy the codeThe code is as follows:
function getEvent(_event){
// The parameter_event under Firefox is the event object
// Get the event object under IE
if()_event = ;
// Show the triggered event name
alert(_event.type);
}
The following lists several common properties and methods for events (differences):
| IE | Standard DOM | illustrate |
| cancelBubble | cancelBubble | Is it bubbling (read only in standard DOM) |
| none | stopPropagation( ) | How to stop events from bubble upwards |
| none | charCode | Unicode value of the key press |
| keyCode | keyCode | The Unicode value of the keypress event in IE represents the keypress value; The keypress event in standard DOM is 0; In other cases, keyCode is the numeric code of the key. |
| srcElement | target | Element that triggers the event (object source) |
| type | type | The name of the event |
Notice:
In the IE browser, the object source (HTML tag) that gets the trigger event is through the srcElement property of the event object;
In standard DOM, the object source (HTML tag) that gets the trigger event is through the target attribute of the event object;
An example of getting event target:
Copy the codeThe code is as follows:
<html>
<head>
<title>Target of Event</title>
<script language="javascript">
function handle(oEvent){
//Process compatibility and obtain event objects
if() oEvent = ;
var oTarget;
//Process compatibility and obtain event target
if()
oTarget = ;
else oTarget = ;
//The name of the tag of the pop-up target
alert();
}
= function(){
var obj = ("a")[0];
= handle;
}
</script>
</head>
<body>
<a href="#">Example of getting event source</a>
</body>
</html>
D Keyboard Events
| event | illustrate |
| keydown | Press a key on the keyboard to trigger it. (Holding a key will continue to trigger） |
| keypress | Press a key andGenerate characterstriggered when . (That is, ignore function keys such as Shift, Alt, Ctrl） |
| keyup | Triggered when a key is released. |
i > About keyCode attributes and charCode attributes
keyCode attribute: represents the keyboard key code. Therefore, when entering the letter "a" and "A", the keyboard code 65 is displayed;
charCode property: represents the input character code. Therefore, when entering the letter "a" and the letter "A",
Show 97 (a character code) and 65 (A character code) respectively;
Notice:
In the standard DOM: there is both the keyCode attribute and the charCode attribute.
However, in standard DOM, the keyCode attribute value in the keypress event is always 0;
In IE browser: the event object has only the keyCode attribute, no charCode attribute.
However, in IE browser, the keyCode attribute value in the keypress event is equivalent to the charCode attribute value in the standard DOM;
Sample code:
Copy the codeThe code is as follows:
<html>
<head>
<title>Keyboard Events</title>
<script language="javascript">
function handle(oEvent){
if(){
//Process compatibility and obtain event objects
oEvent = ;
//Set the charCode value of IE
= ( == "keypress") ? : 0;
}
var oDiv = ("display");
//Output test
+= // Event name
+ ": charCode:" + // Character code charCode
+ " keyCode:" + + "<br>"; // Keyboard keyCode
}
= function(){
var oTextArea = ("textarea")[0];
= handle;
= handle;
}
</script>
</head>
<body>
<textarea rows="4" cols="50"></textarea>
<div ></div>
</body>
</html>
ii > Block the right mouse button
Method 1:
Through the mouse event, determine that the button attribute value of the event object is "2" to block the right mouse button. Although this method works in IE browsers, it does not work in standard DOMs. Moreover, in mouse events, the value of the button attribute is mostly different in IE browser and standard DOM!
Method 2:
In fact, right-clicking the mouse will trigger the right-click menu contextmenu event.
Therefore, the most effective way to block the right mouse button is to block the contextmenu event of the document object.
The code is as follows:
Copy the codeThe code is as follows:
<html>
<head>
<title>Mask the right mouse button</title>
<script language="javascript">
function block(oEvent){
if(){
oEvent = ;
// IE cancels the default event
= false;
}
else
// Firefox cancels the default event
();
}
// Right-click menu event
= block;
</script>
</head>
<body>
<p>Block the right mouse button</p>
</body>
</html>
The IE browser blocks the right-click menu through the returnValue property;
The standard DOM blocks the right-click menu through the preventDefault( ) method;
iii > Customize the right mouse button menu
The code is as follows:
Copy the codeThe code is as follows:
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
<!--
// 1. Block the system right-click menu
= function(_event){
if (){
_event = ;
=false;
=true;
}
else _event.preventDefault();
}
//2. Add a custom right-click menu
= function(_event)
{
var myDIV = ("myDIV");
// Browser compatibility
if ()_event = ;
// Right mouse button
if(_event.button == 2)
{
// _event.clientX Get the current X coordinate of the mouse
/* Notice:
The value of _event.clientX is "read-only" in the standard DOM
Not a standard DOM property
*/
= _event.clientX;
= _event.clientY;
= "block";
}
// Not the right mouse button
else = "none";
}
//-->
</script>
</head>
<body>
<!-- My right-click menu -->
<div style="position:absolute; height:180px; width:200px;
background-color:#CCCCCC; display:none;">
<a href="" target="_blank">xugang</a>
</div>
</body>
</html>
Compatible with IE browser and standard DOM.
Previous page12Read the full text