événement JavaScript DOM HTML
HTML DOM JavaScript, HTML a la capacité de réagir aux événements.
Exemples
Réagir aux événements
Nous pouvons exécuter JavaScript lorsque l'événement se produit, par exemple lorsque l'utilisateur clique sur l'élément HTML.
Pour exécuter du code lorsque l'utilisateur clique sur un élément, ajouter un code JavaScript à l'événement attributs HTML:
Exemples d'événements HTML:
- Lorsque l'utilisateur clique sur la souris
- Lorsque la page est chargée
- Lorsque l'image est chargée
- Lorsque la souris se déplace sur l'élément
- Lorsque le champ d'entrée est changé
- Lorsque vous soumettez un formulaire HTML
- Lorsque l'utilisateur déclenche la clé
Dans cet exemple, lorsqu'un utilisateur sur le <h1> élément lorsqu'il est cliqué, va changer son contenu:
Exemples
<Html>
<Body>
<H1 onclick = "this.innerHTML = 'Ooops!"> Cliquez sur le texte! </ H1>
</ Body>
</ Html>
Essayez »
Dans ce cas, pour appeler une fonction du gestionnaire d'événements:
Exemples
<Html>
<Head>
<Script>
fonction changeText (id)
{
id.innerHTML = "Ooops!";
}
</ Script>
</ Head>
<Body>
<H1 onclick = "changeText (this)"> cliquez sur le texte! </ H1>
</ Body>
</ Html>
Essayez »
Attributs HTML événement
Pour affecter des événements au format HTML éléments, vous pouvez utiliser les attributs de l'événement.
Exemples
Assigné à l'événement onclick de l'élément de bouton:
Essayez »
Dans l'exemple ci-dessus, la fonction nommée displayDate exécutera lorsque le bouton est cliqué.
Utilisez le DOM HTML pour attribuer un événement
DOM HTML vous permet d'utiliser JavaScript pour attribuer des événements à des éléments HTML:
Exemples
Assigné à l'événement onclick de l'élément de bouton:
. Document.getElementById ( "myBtn") onclick = function () {displayDate ()};
</ Script>
Essayez »
Dans l'exemple ci-dessus, la fonction est affectée à un myButn id = "élément HTML displayDate nommé.
Cliquez sur le bouton lorsque la fonction Javascript sera exécutée.
onload et événement onunload
onload et onunload événement est déclenché lorsque l'utilisateur entre ou quitte la page.
événement onload peut être utilisé le type de navigateur et la version du navigateur du visiteur est détecté, et sur la base de ces informations pour charger la version correcte de la page.
onload et l'événement onunload peut être utilisé pour gérer cookie.
événement onchange
événement souvent combiné validation sur le terrain d'entrée onchange à utiliser.
Voici un exemple de la façon d'utiliser le onchange. Lorsque l'utilisateur modifie le contenu du champ de saisie, appelle la fonction upperCase ().
onmouseover et onmouseout événements
onmouseover et onmouseout événements peuvent être utilisés pour déclencher les fonctions lorsque les mouvements de la souris de l'utilisateur vers le haut de l'élément HTML ou les éléments supprimés.
onmousedown, onmouseup et événement onclick
onmousedown, onmouseup et onclick constituent toutes les parties de l'événement clic de souris. Tout d'abord, lorsque vous cliquez sur le bouton de la souris, le déclencheur onmousedown événement lorsque le bouton de la souris est relâché, il va déclencher onmouseup événement, et enfin, lorsque la réalisation d'un clic de souris, il va déclencher l'événement onclick.
Exemples
Un simple exemple onmousedown-onmouseup:
D'autres exemples
onmousedown et onmouseup
Lorsque l'utilisateur appuie sur le bouton de la souris, le remplacement d'une image.
onload
Lorsque la page est fini de charger, afficher une boîte de message.
onfocus
Lorsque le champ de saisie a le focus, changer la couleur de fond.
Les événements de souris
Lorsque le pointeur se déplace sur l'élément, changer sa couleur, lorsque le pointeur se déplace hors du texte, sa couleur va changer à nouveau.