Javascript

Les événements du Javascript

Les événements du Javascript - Base de la programmation orientée-objet

Un document comporte plusieurs objets, les objets peuvent être les éléments d’un formulaire, les images les liens les textes et même le document lui-même etc. Cette technique orientée-objet permet d’isoler les objets entre eux en leur donnant une certaine indépendance. Parmi les techniques de manipulation des objets il existe les événements ou "Event". Un événement est une action commise par l’utilisateur qui affecte directement un ou plusieurs objets. À l’aide de mot réservé vous pouvez réagir et contrôler à peu prêt tout ce qui est fait par l’usager.

NOTE : Parmi les événements il y a le FOCUS. Cet événement est très important à comprendre car certains objets ne réagissent aux événements que lorsqu’ils sont en état de FOCUS. Le FOCUS est attribué à un seul objet à la fois. Par exemple lorsque vous entrez dans une page, le FOCUS est par défaut le document lui-même. Pour bien saisir, cliquez sur la touche TAB, vous aller observer le mouvement du FOCUS dans de la fenêtre. Lorsque le FOCUS est sur un objet, une ligne pointillée en fait le tour. Tout ce qui se fait sous Windows fonctionne de cette façon. Que ce soit en HTML, Javascript, Visual Basic ou même en C. C’est pourquoi si le FOCUS n’est plus directement dans le navigateur, la touche TAB vous permet de change le FOCUS entre les objets de Windows, c’est à dire entre application ou fichier sur le bureau etc.

: Compatible avec Netscape Navigator 3 et plus.
: Compatible avec Netscape Navigator 4 et plus.
: Compatible avec Internet Explorer 3 et plus.
: Compatibleavec Internet Explorer 4 et plus.

Événement	Avec	Description
OnAbort	BODY, FRAMESET	À l’interruption du chargement d’une page.
OnAfterUpdate	Tout	Après une modification d’’un formulaire.
OnBlur	LABEL, INPUT, SELECT, TEXTAREA, BUTTON	Quand un objet perd son FOCUS.
OnChange	INPUT, TEXTAREA	Après la modification d’un objet.
OnClick	Tout	Quand l’utilisateur clic sur un objet.
OnDbClick	Tout	Quand l’utilisateur bouble clic sur un objet.
OnError	Tout	Quand un objet n’a pas été chargé.
OnFocus	LABEL, INPUT, SELECT, TEXTAREA, BUTTON	Quand un objet prend le FOCUS.
OnHelp	Tout	Quand l’utilisateur appuie sur la touche F1 (aide).
OnKeyDown	Tout	Quand l’utilisateur appuie sur une touche
OnKeyPress	Tout	Quand l’utilisateur relâche une touche
OnKeyUp	Tout	Quand l’utilisateur relâche une touche sur un objet.
OnLoad	BODY, FRAMESET	À l’ouverture d’un document.
OnMouseDown	Tout	Quand l’utilisateur appuie sur un bouton de la souris.
OnMouseMove	Tout	Quand l’utilisateur bouge la souris.
OnMouseOut	Tout	Quand l’utilisateur bouge la souris hors d’un objet.
OnMouseOver	Tout	Quand l’utilisateur bouge la souris au dessus d’un objet.
OnMouseUp	Tout	Quand l’utilisateur relâche un bouton de la souris.
OnReadyStateChange	FORM	Quand le document se charge.
OnReset	FORM	Quand le bouton RESET d’un formulaire est cliqué.
OnResize	BODY	Quand l’utilisateur redimensionne la fenêtre du navigateur
OnScroll	BODY	Quand l’utilisateur se sert des barres de défilement de la page
OnSelect	INPUT, TEXTAREA	Quand l’utilisateur sélectionne du texte
OnSubmit	FORM	Quand un formulaire est envoyé.
OnUnLoad	BODY, FRAMESET	Quand le navigateur ferme la page HTML

Mise à jour (2019)

<button onclick="maFonction();">Cliquez ici</button>

Souris (Mouse)

onclick, oncontextmenu, ondblclick, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseover, onmouseout, onmouseup

Clavier (Keyboard)

onkeydown, onkeypress, onkeyup

Cadre (Frame)

onabort, onbeforeunload, onerror, onhashchange, onload, onpageshow, onpagehide, onresize, onscroll, onunload

Formulaire (Form)

onblur, onchange, onfocus, onfocusin, onfocusout, oninput, oninvalid, onreset, onsearch, onselect, onsubmit

Glisser (Drag)

ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop

Presse-papiers (Clipboard)

oncopy, oncut, onpaste

Média

onabort, oncanplay, oncanplaythrough, ondurationchange, onended, onerror, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, onsuspend, ontimeupdate, onvolumechange, onwaiting

Animation

animationend, animationiteration, animationstart

Divers

transitionend, onmessage, onmousewheel, ononline, onoffline, onpopstate, onshow, onstorage, ontoggle, onwheel, ontouchcancel, ontouchend, ontouchmove, ontouchstart

Exemples :

Avec le document

<body OnLoad="alert('Message')">

Avec un lien

<a href="javascript:;" OnClick="alert('Message')">Lien hypertexte</a>

Avec un formulaire

<form OnSubmit="alert('message')"><br />
<input OnFocus="alert('message')">
</form>

Équivalence JavaScript des attributs de style CSS

L’idée est quand un style CSS est un nom composé, en javascript on enlève le tirer et remplace la première lettre du deuxième mot en majuscule. Examples:

• color = color
• background-color = backgroundColor
• font-style = fontStyle
• font-weight = fontWeight

Propriétés de bloc

Propriétés de couleur et de couleur de fond

Propriétés de classification

Propriétés de police de caractères

Propriétés de texte