search
HomeWeb Front-endJS TutorialDetailed explanation of the usage of window.event event in javascript_Basic knowledge

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:



Detailed explanation of the usage of window.event event in javascript_Basic knowledge4.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.
Statement
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
Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

JavaScript: Exploring the Versatility of a Web LanguageJavaScript: Exploring the Versatility of a Web LanguageApr 11, 2025 am 12:01 AM

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

The Evolution of JavaScript: Current Trends and Future ProspectsThe Evolution of JavaScript: Current Trends and Future ProspectsApr 10, 2025 am 09:33 AM

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

Demystifying JavaScript: What It Does and Why It MattersDemystifying JavaScript: What It Does and Why It MattersApr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Is Python or JavaScript better?Is Python or JavaScript better?Apr 06, 2025 am 12:14 AM

Python is more suitable for data science and machine learning, while JavaScript is more suitable for front-end and full-stack development. 1. Python is known for its concise syntax and rich library ecosystem, and is suitable for data analysis and web development. 2. JavaScript is the core of front-end development. Node.js supports server-side programming and is suitable for full-stack development.

How do I install JavaScript?How do I install JavaScript?Apr 05, 2025 am 12:16 AM

JavaScript does not require installation because it is already built into modern browsers. You just need a text editor and a browser to get started. 1) In the browser environment, run it by embedding the HTML file through tags. 2) In the Node.js environment, after downloading and installing Node.js, run the JavaScript file through the command line.

How to send notifications before a task starts in Quartz?How to send notifications before a task starts in Quartz?Apr 04, 2025 pm 09:24 PM

How to send task notifications in Quartz In advance When using the Quartz timer to schedule a task, the execution time of the task is set by the cron expression. Now...

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)