Maison interface Web js tutoriel javascript中window.event事件用法详解_基础知识

javascript中window.event事件用法详解_基础知识

May 16, 2016 pm 05:46 PM
事件

前两天写程序时因为要用到javascript中的window.event事件,于是就在网上搜了一下,终于找到一篇不错的文章,来与大家分享下:
描述
event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。
event对象只在事件发生的过程中才有效。
event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。
例子下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转。

复制代码 代码如下:


Cancels Links

下面的例子在状态栏上显示鼠标的当前位置。
复制代码 代码如下:



javascript中window.event事件用法详解_基础知识4.clientX

描述:
返回鼠标在窗口客户区域中的X坐标。
语法:
event.clientX
注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

5.clientY
描述:
返回鼠标在窗口客户区域中的Y坐标。
语法:
event.clientY
注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

6.ctrlKey
描述:
检查ctrl键的状态。
语法:
event.ctrlKey
可能的值:
当ctrl键按下时,值为 TRUE ,否则为 FALSE 。只读。

7.fromElement
描述:
检测 onmouseover 和 onmouseout 事件发生时,鼠标所离开的元素。 参考:18.toElement
语法:
event.fromElement
注释:
这是个只读属性。

8.keyCode
描述:
检测键盘事件相对应的内码。
这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件。
语法:
event.keyCode[ = keyCode]
可能的值:
这是个可读写的值,可以是任何一个Unicode键盘内码。如果没有引发键盘事件,则该值为 0 。

9.offsetX
描述:
检查相对于触发事件的对象,鼠标位置的水平坐标
语法:
event.offsetX

10.offsetY
描述:
检查相对于触发事件的对象,鼠标位置的垂直坐标
语法:
event.offsetY

11.propertyName
描述:
设置或返回元素的变化了的属性的名称。
语法:
event.propertyName [ = sProperty ]
可能的值:
sProperty 是一个字符串,指定或返回触发事件的元素在事件中变化了的属性的名称。
这个属性是可读写的。无默认值。
注释:
你可以通过使用 onpropertychange 事件,得到 propertyName 的值。
例子:
下面的例子通过使用 onpropertychange 事件,弹出一个对话框,显示 propertyName 的值。
复制代码 代码如下:


<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]
描述:
设置或检查从事件中返回的值
语法:
event.returnValue[ = Boolean]
可能的值:
true 事件中的值被返回
false 源对象上事件的默认操作被取消
例子见本文的开头。

13.screenX
描述:
检测鼠标相对于用户屏幕的水平位置
语法:
event.screenX
注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

14.screenY
描述:
检测鼠标相对于用户屏幕的垂直位置
语法:
event.screenY
注释:
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

15.shiftKey
描述:
检查shift键的状态。
语法:
event.shiftKey
可能的值:
当shift键按下时,值为 TRUE ,否则为 FALSE 。只读。

16.srcElement
描述:
返回触发事件的元素。只读。例子见本文开头。
语法:
event.srcElement

17.srcFilter
描述:
返回触发 onfilterchange 事件的滤镜。只读。
语法:
event.srcFilter

18.toElement
描述:
检测 onmouseover 和 onmouseout 事件发生时,鼠标所进入的元素。 参考:7.fromElement
语法:
event.toElement
注释:
这是个只读属性。
例子:下面的代码演示了当鼠标移到按钮上时,弹出一个对话框,显示“mouse arrived”
复制代码 代码如下:

<script> <BR>function testMouse(oObject) { <BR>if(oObject.contains(event.toElement)) { <BR>alert(“mouse arrived”); <BR>} <BR>} <BR></script>
:
19.type

描述:
返回事件名。
语法:
event.type
注释:
返回没有“on”作为前缀的事件名,比如,onclick事件返回的type是click
只读。

20. x
描述:
返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。
语法:
event.x
注释:
如果事件触发后,鼠标移出窗口外,则返回的值为 -1
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。

21. y
描述:
返回鼠标相对于css属性中有position属性的上级元素的y轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。
语法:
event.y
注释:
如果事件触发后,鼠标移出窗口外,则返回的值为 -1
这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
4 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

ID d'événement 4660 : objet supprimé [Correctif] ID d'événement 4660 : objet supprimé [Correctif] Jul 03, 2023 am 08:13 AM

Certains de nos lecteurs ont rencontré l'événement ID4660. Ils ne savent souvent pas quoi faire, c'est pourquoi nous l'expliquons dans ce guide. L'ID d'événement 4660 est souvent enregistré lorsque des objets sont supprimés. Nous explorerons donc également quelques moyens pratiques de le corriger sur votre ordinateur. Qu'est-ce que l'événement ID4660 ? L'ID d'événement 4660 est lié aux objets dans Active Directory et sera déclenché par l'un des facteurs suivants : Suppression d'objet – Un événement de sécurité avec l'ID d'événement 4660 est enregistré chaque fois qu'un objet est supprimé d'Active Directory. Modifications manuelles – L'ID d'événement 4660 peut être généré lorsqu'un utilisateur ou un administrateur modifie manuellement les autorisations d'un objet. Cela peut se produire lors de la modification des paramètres d'autorisation, de la modification des niveaux d'accès ou de l'ajout ou de la suppression de personnes ou de groupes.

Recevez les événements du calendrier à venir sur l'écran de verrouillage de votre iPhone Recevez les événements du calendrier à venir sur l'écran de verrouillage de votre iPhone Dec 01, 2023 pm 02:21 PM

Sur les iPhones exécutant iOS 16 ou version ultérieure, vous pouvez afficher les événements du calendrier à venir directement sur l'écran de verrouillage. Lisez la suite pour savoir comment procéder. Grâce aux complications du cadran, de nombreux utilisateurs d'Apple Watch sont habitués à pouvoir jeter un coup d'œil à leur poignet pour voir le prochain événement du calendrier à venir. Avec l'avènement d'iOS16 et des widgets d'écran de verrouillage, vous pouvez afficher les mêmes informations sur les événements du calendrier directement sur votre iPhone sans même déverrouiller l'appareil. Le widget Calendar Lock Screen est disponible en deux versions, vous permettant de suivre l'heure du prochain événement à venir ou d'utiliser un widget plus grand qui affiche les noms des événements et leurs heures. Pour commencer à ajouter des widgets, déverrouillez votre iPhone à l'aide de Face ID ou Touch ID, appuyez et maintenez

Comment implémenter des fonctions de calendrier et des rappels d'événements dans les projets PHP ? Comment implémenter des fonctions de calendrier et des rappels d'événements dans les projets PHP ? Nov 02, 2023 pm 12:48 PM

Comment implémenter des fonctions de calendrier et des rappels d'événements dans les projets PHP ? La fonctionnalité de calendrier et les rappels d'événements sont l'une des exigences courantes lors du développement d'applications Web. Qu'il s'agisse de gestion d'agenda personnel, de collaboration en équipe ou de planification d'événements en ligne, la fonction de calendrier peut fournir une gestion pratique du temps et l'organisation des transactions. L'implémentation de fonctions de calendrier et de rappels d'événements dans les projets PHP peut être réalisée en suivant les étapes suivantes. Conception de la base de données Tout d'abord, vous devez concevoir une table de base de données pour stocker les informations sur les événements du calendrier. Une conception simple peut contenir les champs suivants : id : unique à l'événement

En JavaScript, quel est le but de l'événement « oninput » ? En JavaScript, quel est le but de l'événement « oninput » ? Aug 26, 2023 pm 03:17 PM

Lorsqu'une valeur est ajoutée à la zone de saisie, l'événement oninput se produit. Vous pouvez essayer d'exécuter le code suivant pour comprendre comment implémenter les événements oninput en JavaScript - Exemple<!DOCTYPEhtml><html> <body> <p>Écrivez ci-dessous :</p> <inputtype="text&quot

Comment implémenter la liaison d'événement de changement d'éléments sélectionnés dans jQuery Comment implémenter la liaison d'événement de changement d'éléments sélectionnés dans jQuery Feb 23, 2024 pm 01:12 PM

jQuery est une bibliothèque JavaScript populaire qui peut être utilisée pour simplifier la manipulation du DOM, la gestion des événements, les effets d'animation, etc. Dans le développement Web, nous rencontrons souvent des situations dans lesquelles nous devons modifier la liaison d'événements sur des éléments sélectionnés. Cet article explique comment utiliser jQuery pour lier des événements de modification d'éléments sélectionnés et fournit des exemples de code spécifiques. Tout d'abord, nous devons créer un menu déroulant avec des options utilisant des étiquettes :

Quels sont les événements couramment utilisés dans jquery Quels sont les événements couramment utilisés dans jquery Jan 03, 2023 pm 06:13 PM

Les événements couramment utilisés dans jquery sont : 1. Les événements de fenêtre ; 2. Les événements de souris, qui sont des événements générés lorsque l'utilisateur déplace ou clique avec la souris sur le document, y compris les clics de souris, les événements d'entrée, les événements de sortie, etc. ; 3. Événements de clavier. Les événements sont générés chaque fois que l'utilisateur appuie ou relâche une touche du clavier, y compris les événements de pression sur une touche, les événements de relâchement de touche, etc. 4. Les événements de formulaire, par exemple lorsqu'un élément obtient le focus, le focus() ; L'événement sera déclenché, et lorsqu'il perd le focus, l'événement Blur() est déclenché et l'événement submit() est déclenché lorsque le formulaire est soumis.

Explication détaillée des événements de liaison de zone de saisie dans les documents Vue Explication détaillée des événements de liaison de zone de saisie dans les documents Vue Jun 21, 2023 am 08:12 AM

Vue.js est un framework JavaScript léger, facile à utiliser, efficace et flexible. Il s'agit actuellement de l'un des frameworks front-end les plus populaires. Dans Vue.js, les événements de liaison de zone de saisie sont une exigence très courante. Cet article présentera en détail les événements de liaison de zone de saisie dans le document Vue. 1. Concepts de base Dans Vue.js, l'événement de liaison de la zone de saisie fait référence à la liaison de la valeur de la zone de saisie à l'objet de données de l'instance Vue, réalisant ainsi une liaison bidirectionnelle de l'entrée et de la réponse. Dans Vue.j

Une plongée approfondie dans les événements du bouton de fermeture dans jQuery Une plongée approfondie dans les événements du bouton de fermeture dans jQuery Feb 24, 2024 pm 05:09 PM

Compréhension approfondie de l'événement du bouton de fermeture dans jQuery Au cours du processus de développement front-end, nous rencontrons souvent des situations où nous devons implémenter la fonction du bouton de fermeture, comme la fermeture des fenêtres contextuelles, la fermeture des boîtes de dialogue, etc. Lorsque vous utilisez jQuery, une bibliothèque JavaScript populaire, il devient extrêmement simple et pratique d'implémenter l'événement du bouton de fermeture. Cet article expliquera comment utiliser jQuery pour implémenter des événements de bouton de fermeture et fournira des exemples de code spécifiques pour aider les lecteurs à mieux comprendre et maîtriser cette technologie. Tout d’abord, nous devons comprendre comment définir

See all articles