Home > Web Front-end > JS Tutorial > Detailed explanation of the usage of window.event event in javascript_Basic knowledge

Detailed explanation of the usage of window.event event in javascript_Basic knowledge

WBOY
Release: 2016-05-16 17:46:56
Original
1197 people have browsed it

When I was writing a program two days ago, I needed to use the window.event event in JavaScript, so I searched the Internet and finally found a good article to share with you:
Description
Event represents the status of the event, such as the element that triggered the event object, the position and status of the mouse, the key pressed, etc.
The event object is only valid during the event.
Some attributes of event are only meaningful for 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, cancels the link jump.

Copy code The code is as follows:


< ;TITLE>Cancels Links

The following example is displayed on the status bar The current position of the mouse.
Copy code The code is as follows:



4.clientX

Description:
Returns the X coordinate of the mouse in the client area of ​​the window.
Syntax:
event.clientX
Comments:
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.

5.clientY
Description:
Returns the Y coordinate of the mouse in the client area of ​​the window.
Syntax:
event.clientY
Comments:
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.

6.ctrlKey
Description:
Check the status of ctrl key.
Syntax:
event.ctrlKey
Possible values:
The value is TRUE when the ctrl key is pressed, FALSE otherwise. Read only.

7.fromElement
Description:
Detects the element that the mouse leaves when the onmouseover and onmouseout events occur. Reference: 18.toElement
Syntax:
event.fromElement
Comments:
This is a read-only property.

8.keyCode
Description:
Detects the internal code corresponding to keyboard events.
This attribute is used for onkeydown, onkeyup, and onkeypress events.
Syntax:
event.keyCode[ = keyCode]
Possible values:
This is a readable and writable value and can be any Unicode keyboard internal code. If no keyboard event was raised, the value is 0 .

9.offsetX
Description:
Checks the horizontal coordinate of the mouse position relative to the object that triggered the event
Syntax:
event.offsetX

10.offsetY
Description:
Checks the vertical coordinate of the mouse position relative to the object that triggered the event
Syntax:
event.offsetY

11.propertyName
Description:
Sets or returns the name of the element's changed property.
Syntax:
event.propertyName [= sProperty]
Possible values:
sProperty is a string that specifies or returns the name of the property that changed in the event on the element that triggered the event.
This property is readable and writable. No default value.
Note:
You can get the value of propertyName by using the onpropertychange event.
Example:
The following example uses the onpropertychange event to pop up a dialog box to display the value of propertyName.
Copy code The code is as follows:


<SCRIPT> <br>function changeProp() <br>{ <br>btnProp.value = “This is the new VALUE”; <br>} <br>function changeCSSProp() <br>{ <br>btnStyleProp.style.backgroundColor = “ aqua"; <br>} <br></SCRIPT>


The event object property propertyName is
used here to return which property has been
altered.


VALUE=”Click to change the VALUE property of this button”
onpropertychange='alert(event.propertyName ” property has changed value”)’>
onclick=”changeCSSProp()”
VALUE=”Click to change the CSS backgroundColor property of this button"
onpropertychange='alert(event.propertyName ” property has changed value”)'>


12.returnValue
[/code]
Description:
Set or check the value returned from the event
Syntax:
event.returnValue[ = Boolean ]
Possible values:
true The value in the event is returned
false The default action of the event on the source object is canceled
See the beginning of this article for an example.

13.screenX
Description:
Detects the horizontal position of the mouse relative to the user's screen
Syntax:
event.screenX
Comments:
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.

14.screenY
Description:
Detects the vertical position of the mouse relative to the user's screen
Syntax:
event.screenY
Comments:
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.

15.shiftKey
Description:
Check the status of the shift key.
Syntax:
event.shiftKey
Possible values:
The value is TRUE when the shift key is pressed, FALSE otherwise. Read only.

16.srcElement
Description:
Returns the element that triggered the event. Read only. See the example at the beginning of this article.
Syntax:
event.srcElement

17.srcFilter
Description:
Returns the filter that triggers the onfilterchange event. Read only.
Syntax:
event.srcFilter

18.toElement
Description:
Detect the element that the mouse enters when the onmouseover and onmouseout events occur. Reference: 7.fromElement
Syntax:
event.toElement
Comments:
This is a read-only property.
Example: The following code demonstrates that when the mouse moves over the button, a dialog box pops up and displays "mouse arrived"
Copy code The code is as follows:

<SCRIPT> <br>function testMouse(oObject) { <br>if(oObject.contains(event.toElement)) { <br>alert(“ mouse arrived"); <br>} <br>} <br></SCRIPT>
:

Description:
Returns the event name.
Syntax:
event.type
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
Description:
Returns the x-axis coordinate of the mouse relative to the parent element with the position attribute in the css attribute. If there is no parent element with a position attribute in the css attribute, the BODY element will be used as the reference object by default.
Syntax:
event.x
Comments:
If the mouse moves 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
Description:
Returns the y-axis coordinate of the mouse relative to the parent element with the position attribute in the css attribute. If there is no parent element with a position attribute in the css attribute, the BODY element will be used as the reference object by default.
Syntax:
event.y
Comments:
If the mouse moves 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.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template