communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Comment utiliser DOM pour distribuer des événements

Comment utiliser DOM pour distribuer des événements

一个新手
Libérer： 2017-10-24 10:01:45
original
1965 Les gens l'ont consulté

Un,

événements onmouseover et onmouseout

Les événements onmouseover et onmouseout peuvent être utilisés lorsque la souris de l'utilisateur se déplace sur ou hors d'un Elément HTML La fonction est déclenchée lorsque l'élément est appelé.

Un petit exemple : Avant que la souris soit en hautAprès l'avoir déplacée vers le haut


（1）关键代码
<body>
<p onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</p>
<script>="谢谢"="把鼠标移到上面"</script>
（2）关键代码  （两种方法均可实现）
<p onmouseover="innerHTML=&#39;谢谢&#39;" onmouseout="innerHTML=&#39;把鼠标移到上面&#39;"
 style="width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</p>
Copier après la connexion

Deux événements ,

onmousedown, onmouseup et onclick

onmousedown, onmouseup et onclick constituent toutes les parties de l'événement de clic de souris. Tout d'abord, lorsque le bouton de la souris est cliqué, l'événement onmousedown est déclenché, lorsque le bouton de la souris est relâché, l'événement onmouseup est déclenché et enfin, lorsque le clic de la souris est terminé, l'événement onclick est déclenché.

Exemple :

Avant que la souris soit cliquéeLorsque la souris est cliquéeAprès avoir relâché la souris


（1）关键代码
<p onmousedown="mDown(this)" onmouseup="mUp(this)"style="background-color:green;color:#ffffff;
width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</p>

<script>="#1ec5e5"="请释放鼠标按钮"="green"="请按下鼠标按钮"</script>
（2）关键代码   （两种方法均可）
<p onmousedown="style.backgroundColor=&#39;#1ec5e5&#39;,innerHTML=&#39;请释放鼠标&#39;" 
onmouseup="style.backgroundColor=&#39;red&#39;,innerHTML=&#39;请按下鼠标&#39;" 
style="color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</p>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
事件 使用 distribuer
source：php.cn
Article précédent：Problèmes liés au tri du code source v8 en JavaScript Article suivant：Méthode de traitement de rafraîchissement en temps réel Ajax
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
Derniers articles par auteur
Derniers numéros
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1335
Où dois-je placer la directive CustomLog dans Apache J'utilise php:7.2-apachedocker. Je dois désactiver le journal d'accès à la connexion à l'U...
Depuis 2024-04-06 22:03:59
0
1
990
Comment déclencher le rendu (avec filtre et pagination) sur la méthode de tri dans React ? Voici mon composant de style Sort.js : <SortWrapper><SortText>SortBy</SortT...
Depuis 2024-04-06 21:28:37
0
1
2257
La requête et la formule forment la table entière, avec de nouvelles colonnes, où les nouvelles colonnes sont des formules impliquant d'autres valeurs de colonnes conditionnelles. EDIT : La formule doit être la colonne "valeur" - la colonne "valeur" ...
Depuis 2024-04-06 21:23:40
0
2
530
Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
Depuis 2024-04-06 20:02:10
0
2
543
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal