Event represents the status of the event, such as the element that triggers the event object, the position and status of the mouse, the key pressed, etc.
The event object is only valid during the event.
Some properties of an event are only meaningful to specific events. For example, the fromElement and toElement properties are only meaningful for onmouseover and onmouseout events.
example
The following example checks whether the mouse is clicked on the link and, if the shift key is pressed, the link will be unredirected.
<HTML>
<HEAD><TITLE>Cancels Links</TITLE>
<SCRIPT LANGUAGE="JScript">
function cancelLink() {
if ( == "A" && )
= false;
}
</SCRIPT>
<BODY onclick="cancelLink()">
The following example shows the current position of the mouse on the status bar.
<BODY onmousemove=" = 'X=' + + ' Y=' + ">
property:
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y
--------------------------------------------------------------------------------
describe:
Check the status of the alt key.
grammar:
Possible values:
When the alt key is pressed, the value is TRUE, otherwise it is FALSE. Read-only.
describe:
Check the pressed mouse button.
grammar:
Possible values:
0 No button press
1 Press the left button
2 Press the right button
3 Press the left and right keys
4 Press the middle key
5 Press the left and middle keys
6 Press the right and middle keys
7 Press all keys
This property is only used for onmousedown, onmouseup, and onmousemove events. For other events, no matter the mouse status, it returns 0 (such as onclick).
describe:
Detect whether the control of events of the upper element is accepted.
grammar:
[ = cancelBubble]
Possible values:
This is a readable and writeable boolean:
TRUE is not controlled by the events of the upper element.
FALSE allows to be controlled by events of the upper layer element. This is the default value.
example:
The following code snippet demonstrates that when onclick is clicked on the picture, if the shift key is also pressed, the showSrc() function caused by the event onclick on the upper element is cancelled.
<SCRIPT LANGUAGE="JScript">
function checkCancel() {
if ()
= true;
}
function showSrc() {
if ( == "IMG")
alert();
}
</SCRIPT>
<BODY onclick="showSrc()">
<IMG onclick="checkCancel()" src="/">
describe:
Returns the X coordinate of the mouse in the window client area.
grammar:
Notes:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
describe:
Returns the Y coordinate of the mouse in the window client area.
grammar:
Notes:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
describe:
Check the status of the ctrl key.
grammar:
Possible values:
When the ctrl key is pressed, the value is TRUE, otherwise it is FALSE. Read-only.
describe:
Detects the element that the mouse leaves when the onmouseover and onmouseout events occur. refer to:
grammar:
Notes:
This is a read-only property.
describe:
Detect the inner code corresponding to the keyboard event.
This property is used for onkeydown, onkeyup, and onkeypress events.
grammar:
[ = keyCode]
Possible values:
This is a readable and writeable value, which can be any Unicode keyboard internal code. If no keyboard event is raised, the value is 0.
describe:
Check the horizontal coordinates of the mouse position relative to the object that triggers the event
grammar:
describe:
Check the vertical coordinates of the mouse position relative to the object that triggers the event
grammar:
describe:
Sets or returns the name of the changed attribute of the element.
grammar:
[ = sProperty ]
Possible values:
sProperty is a string that specifies or returns the name of the property that changed in the event that triggered the event.
This property is readable and writeable. No default value.
Notes:
You can get the value of propertyName by using the onpropertychange event.
example:
The following example pops up a dialog box by using the onpropertychange event, showing the value of propertyName.
<HEAD>
<SCRIPT>
function changeProp()
{
= "This is the new VALUE";
}
function changeCSSProp()
{
= "aqua";
}
</SCRIPT>
</HEAD>
<BODY>
<P>The event object property propertyName is
used here to return which property has been
altered.</P>
<INPUT TYPE=button ID=btnProp onclick="changeProp()"
VALUE="Click to change the VALUE property of this button"
onpropertychange='alert(+" property has changed value")'>
<INPUT TYPE=button ID=btnStyleProp
onclick="changeCSSProp()"
VALUE="Click to change the CSS backgroundColor property of this button"
onpropertychange='alert(+" property has changed value")'>
</BODY>
describe:
Set or check the value returned from the event
grammar:
[ = Boolean]
Possible values:
true The value in the event is returned
false The default operation of events on the source object is cancelled
See the beginning of this article for an example.
describe:
Detect the horizontal position of the mouse relative to the user's screen
grammar:
Notes:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
describe:
Detect the vertical position of the mouse relative to the user's screen
grammar:
Notes:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
describe:
Check the status of the shift key.
grammar:
Possible values:
When the shift key is pressed, the value is TRUE, otherwise it is FALSE. Read-only.
describe:
Returns the element that triggers the event. Read-only. See the beginning of this article for an example.
grammar:
describe:
Returns the filter that triggers the onfilterchange event. Read-only.
grammar:
describe:
Detects the element entered by the mouse when the onmouseover and onmouseout events occur. refer to:
grammar:
Notes:
This is a read-only property.
Example: The following code demonstrates that when the mouse moves to the button, a dialog box pops up, showing "mouse arrived"
<SCRIPT>
function testMouse(oObject) {
if(()) {
alert("mouse arrived");
}
}
</SCRIPT>
:
<BUTTON ID=oButton onmouseover="testMouse(this)">Mouse Over This.</BUTTON>
describe:
Returns the event name.
grammar:
Notes:
Returns the event name without "on" as the prefix. For example, the type returned by the onclick event is click
Read-only.
20. x
describe:
Returns the x-axis coordinates of the mouse relative to the upper element with the position attribute in the css attribute. If there is no upper element with the position attribute in the css attribute, the BODY element is used as the reference object by default.
grammar:
Notes:
If the mouse is moved out of the window after the event is triggered, the returned value is -1
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
21. y
describe:
Returns the y-axis coordinates of the mouse relative to the superior element with the position attribute in the css attribute. If there is no upper element with the position attribute in the css attribute, the BODY element is used as the reference object by default.
grammar:
Notes:
If the mouse is moved out of the window after the event is triggered, the returned value is -1
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
The above Event really helped me a lot at work, so I remember it, haha. Recently, I have seen some minor problems with AJAX. The file path is wrong when calling WebService. I know that because the newly created project templates are different, the format of the WebServive is also different. No solution has been found yet. I am currently studying. Here is an address to learn AJAX:
/JeffreyZhao/archive/2007/03/12/ASP_NET_AJAX_MSDN_Webcast_Feedback.html
It was done by Mr. Zhao, and it was explained in detail and easy to understand. I hope he can launch more learning demos. . . . . . . . . . . . . Share together
The event object is only valid during the event.
Some properties of an event are only meaningful to specific events. For example, the fromElement and toElement properties are only meaningful for onmouseover and onmouseout events.
example
The following example checks whether the mouse is clicked on the link and, if the shift key is pressed, the link will be unredirected.
<HTML>
<HEAD><TITLE>Cancels Links</TITLE>
<SCRIPT LANGUAGE="JScript">
function cancelLink() {
if ( == "A" && )
= false;
}
</SCRIPT>
<BODY onclick="cancelLink()">
The following example shows the current position of the mouse on the status bar.
<BODY onmousemove=" = 'X=' + + ' Y=' + ">
property:
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y
--------------------------------------------------------------------------------
describe:
Check the status of the alt key.
grammar:
Possible values:
When the alt key is pressed, the value is TRUE, otherwise it is FALSE. Read-only.
describe:
Check the pressed mouse button.
grammar:
Possible values:
0 No button press
1 Press the left button
2 Press the right button
3 Press the left and right keys
4 Press the middle key
5 Press the left and middle keys
6 Press the right and middle keys
7 Press all keys
This property is only used for onmousedown, onmouseup, and onmousemove events. For other events, no matter the mouse status, it returns 0 (such as onclick).
describe:
Detect whether the control of events of the upper element is accepted.
grammar:
[ = cancelBubble]
Possible values:
This is a readable and writeable boolean:
TRUE is not controlled by the events of the upper element.
FALSE allows to be controlled by events of the upper layer element. This is the default value.
example:
The following code snippet demonstrates that when onclick is clicked on the picture, if the shift key is also pressed, the showSrc() function caused by the event onclick on the upper element is cancelled.
<SCRIPT LANGUAGE="JScript">
function checkCancel() {
if ()
= true;
}
function showSrc() {
if ( == "IMG")
alert();
}
</SCRIPT>
<BODY onclick="showSrc()">
<IMG onclick="checkCancel()" src="/">
describe:
Returns the X coordinate of the mouse in the window client area.
grammar:
Notes:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
describe:
Returns the Y coordinate of the mouse in the window client area.
grammar:
Notes:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
describe:
Check the status of the ctrl key.
grammar:
Possible values:
When the ctrl key is pressed, the value is TRUE, otherwise it is FALSE. Read-only.
describe:
Detects the element that the mouse leaves when the onmouseover and onmouseout events occur. refer to:
grammar:
Notes:
This is a read-only property.
describe:
Detect the inner code corresponding to the keyboard event.
This property is used for onkeydown, onkeyup, and onkeypress events.
grammar:
[ = keyCode]
Possible values:
This is a readable and writeable value, which can be any Unicode keyboard internal code. If no keyboard event is raised, the value is 0.
describe:
Check the horizontal coordinates of the mouse position relative to the object that triggers the event
grammar:
describe:
Check the vertical coordinates of the mouse position relative to the object that triggers the event
grammar:
describe:
Sets or returns the name of the changed attribute of the element.
grammar:
[ = sProperty ]
Possible values:
sProperty is a string that specifies or returns the name of the property that changed in the event that triggered the event.
This property is readable and writeable. No default value.
Notes:
You can get the value of propertyName by using the onpropertychange event.
example:
The following example pops up a dialog box by using the onpropertychange event, showing the value of propertyName.
<HEAD>
<SCRIPT>
function changeProp()
{
= "This is the new VALUE";
}
function changeCSSProp()
{
= "aqua";
}
</SCRIPT>
</HEAD>
<BODY>
<P>The event object property propertyName is
used here to return which property has been
altered.</P>
<INPUT TYPE=button ID=btnProp onclick="changeProp()"
VALUE="Click to change the VALUE property of this button"
onpropertychange='alert(+" property has changed value")'>
<INPUT TYPE=button ID=btnStyleProp
onclick="changeCSSProp()"
VALUE="Click to change the CSS backgroundColor property of this button"
onpropertychange='alert(+" property has changed value")'>
</BODY>
describe:
Set or check the value returned from the event
grammar:
[ = Boolean]
Possible values:
true The value in the event is returned
false The default operation of events on the source object is cancelled
See the beginning of this article for an example.
describe:
Detect the horizontal position of the mouse relative to the user's screen
grammar:
Notes:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
describe:
Detect the vertical position of the mouse relative to the user's screen
grammar:
Notes:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
describe:
Check the status of the shift key.
grammar:
Possible values:
When the shift key is pressed, the value is TRUE, otherwise it is FALSE. Read-only.
describe:
Returns the element that triggers the event. Read-only. See the beginning of this article for an example.
grammar:
describe:
Returns the filter that triggers the onfilterchange event. Read-only.
grammar:
describe:
Detects the element entered by the mouse when the onmouseover and onmouseout events occur. refer to:
grammar:
Notes:
This is a read-only property.
Example: The following code demonstrates that when the mouse moves to the button, a dialog box pops up, showing "mouse arrived"
<SCRIPT>
function testMouse(oObject) {
if(()) {
alert("mouse arrived");
}
}
</SCRIPT>
:
<BUTTON ID=oButton onmouseover="testMouse(this)">Mouse Over This.</BUTTON>
describe:
Returns the event name.
grammar:
Notes:
Returns the event name without "on" as the prefix. For example, the type returned by the onclick event is click
Read-only.
20. x
describe:
Returns the x-axis coordinates of the mouse relative to the upper element with the position attribute in the css attribute. If there is no upper element with the position attribute in the css attribute, the BODY element is used as the reference object by default.
grammar:
Notes:
If the mouse is moved out of the window after the event is triggered, the returned value is -1
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
21. y
describe:
Returns the y-axis coordinates of the mouse relative to the superior element with the position attribute in the css attribute. If there is no upper element with the position attribute in the css attribute, the BODY element is used as the reference object by default.
grammar:
Notes:
If the mouse is moved out of the window after the event is triggered, the returned value is -1
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse.
The above Event really helped me a lot at work, so I remember it, haha. Recently, I have seen some minor problems with AJAX. The file path is wrong when calling WebService. I know that because the newly created project templates are different, the format of the WebServive is also different. No solution has been found yet. I am currently studying. Here is an address to learn AJAX:
/JeffreyZhao/archive/2007/03/12/ASP_NET_AJAX_MSDN_Webcast_Feedback.html
It was done by Mr. Zhao, and it was explained in detail and easy to understand. I hope he can launch more learning demos. . . . . . . . . . . . . Share together