07 Chap07 Events Formulaires

Les événements
Le but de la gestion des événements est de faire réagir la page web aux actions de l’utilisateur
sans passer par le serveur.
C’est de la programmation événementielle : le programme (la page web) réagit à un événement
déclenché par l’utilisateur : cliquer sur un bouton par exemple (button HTML).
On peut aussi réagir à n’importe quel événement : cliquer sur n’importe quelle balise, agrandir
la fenêtre, taper au clavier, etc.
On va regarder le cas des boutons pour une première approche.
Info
Avant de commencer les cours sur les événements, voici quelques exemples concrets.
Exemples d'événements
onChange/ onInput
Quand on change le contenu.

Est utilisé sur l'objet javascript form
Est utilisé sur la balise HTML input, textarea, select.
Exemple1 :input
<form>
<input type="text" id="inp1"value="" onChange="ChangerParOnchange()"/>
<div id="div01"></div>
<input type="text" id="inp2" value="" onInput="ChangerParOninput()"/>
ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 1

</form>
//at1.js
function ChangerParOnchange()
{
var inp1=document.getElementById('inp1');
var div1=document.getElementById('div01');
div1.innerHTML=inp1.value;
}
function ChangerParOninput()
{
var inp2=document.getElementById('inp2');
div2.innerHTML=inp2.value;
Exemple2 : select
<input type="text" id="inp" />
<select name="" id="monais" onchange="Calculer()">
<option value="10">Dollard</option>
<option value="11">Euros</option>
<option value="15">Pond</option>
</select>
//at1.js
var div1=document.getElementById('div01'),
inp=document.getElementById('inp'),
sel=document.getElementById('monais');
function Calculer()
{
div1.innerHTML=inp.value * sel.value+" Dhs";
Résultat :
Exemple3 : select
<body >
<select name="color" id="color" >

<option value="red">Red</option>

<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="pink">Pink</option>
</select>
<script src="at1.js"></script>
</body>
/* at1.css */
#div01
{
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border:3px solid yellow;
box-shadow: 0px 0px 5px 5px lime;
}
/*at1.js */
var div1=document.getElementById('div01'),
sel=document.getElementById('color');
sel.onchange=Colorer;
function Colorer()
{
div1.style.backgroundColor=sel.value;
onError
Lorsqu'il se produit une erreur de script.

Est utilisé sur l'objet javascript image, window, frame
Est utilisé sur la balise HTML img, body, frame, frameset.
<body >
</body>
//at1.js
window.onerror=F;
function F(msg,url,line)
{
console.log("Message :",msg);
console.log("Url :",url);
console.log("Line :",line);
}
calculer();

Si on veut afficher le message : calculer is not defined.
//at1.js
window.onerror=F;
function F(msg,url,line)
{
console.log("Message :",msg);
console.log("Url :",url);
console.log("Line :",line);
}
try {
calculer();//Appel d'une fonction non definie
}
catch (e) {
console.log(e.message);
}
onFocus
Quand un objet gagne le focus.

Est utilisé sur l'objet javascript window, frame, form
Est utilisé sur la balise HTML body, frameset, frame, input.
<form>
<input type="text" value="" onfocus="alert('onfocus')"/>
</form>
onBlur
Lorsque l'objet perd le focus.

Est utilisé sur l'objet javascript form, window, frame
Est utilisé sur la balise HTML input, textarea, select, body, frame, frameset.
<form>
<input type="text" value="" onblur="alert('onblur')"/>
</form>
onKeyDown
Quand j'appuie sur la touche.

Est utilisé sur l'objet javascript link, image, document, form
Est utilisé sur la balise HTML a, img, body, textarea.

<input type="text" id="inp" onkeydown="Afficher()"/>
onKeyPress
Quand j'appuie sur une touche.

Est utilisé sur la balise HTML a, img, body, textarea
<input type="text" id="inp" onkeypress="Afficher()"/>

onKeyUp < == > onInput
Quand je lâche la touche.

Est utilisé sur la balise HTML a, img, body, textarea et autre.
<input type="text" id="inp" onkeyup="Afficher()"/>

De même :
<input type="text" id="inp" oninput="Afficher()"/>

onLoad
Lors du chargement.
Est utilisé sur l'objet javascript image, window, frame
Est utilisé sur la balise HTML img, body, frameset, frame
<script>
div01.innerHTML +="JAVASCRIPT";
</script>
</head>
<body >
<div id="div01">HTMl & CSS</div>
</body>
Apres exécution :
Solution :
<script>
window.onload=function()
{
div01.innerHTML +=" JAVASCRIPT";
}
</script>
</head>
<body >
<div id="div01">HTMl & CSS</div>
</body>
Apres exécution :
onMouseDown
Quand le bouton de la souris est appuyé.

Est utilisé sur l'objet javascript link, document, form
Est utilisé sur la balise HTML a, body, form et autre.

<div style="width:100px;height:100px;border:1px solid red" onmousedown="alert('onmousedown')"></div>
onMouseMove
Quand le curseur bouge.

Est utilisé sur la balise HTML a, body, form.
onMouseOut
Quand je sors du lien.

Est utilisé sur l'objet javascript link, area
Est utilisé sur la balise HTML a, area et autre.
<form>
<input type="button" value="Bouton" onmouseout="alert('onmouseout')"/>
</form>
<div style="width:100px;height:100px;border:1px solid red" onmouseout="alert('onmouseout')"></div>
onMouseOver
Quand je passe sur le lien

Est utilisé sur l'objet javascript link, area
Est utilisé sur la balise HTML a, area et autre

<form>
<input type="button" value="Bouton" onmouseover="alert('onmouseover')">
</form>
<div style="width:100px;height:100px;border:1px solid red" onmouseover="alert('onmouseover')"></div>
onMouseUp
Quand le bouton de la souris est relâché.

Est utilisé sur la balise HTML a, body, input, et autre.
<form>
<input type="button" value="Bouton" onmouseup="alert('onmouseup')">
</form>
<div style="width:100px;height:100px;border:1px solid red" onmouseup="alert('onmouseup')"></div>
onMove
Quand je déplace la fenêtre.

Est utilisé sur l'objet javascript window, frame
Est utilisé sur la balise HTML body, frameset, frame.
onReset
Quand je réinitialise.
Est utilisé sur l'objet javascript forms
Est utilisé sur la balise HTML form.

<form onreset="alert('onreset')">
<input type="reset" value="Bouton" />
</form>
onResize
Quand je redimensionne.
Est utilisé sur la balise HTML body, frameset, frame.
onSelect
Quand je sélectionne.
Est utilisé sur la balise HTML input, textarea.
<form onsubmit="alert('onsubmit')">
<input type="submit" value="Bouton" />
</form>
onSubmit
Quand j'envoie un formulaire.

Est utilisé sur la balise HTML form.
<form onsubmit="alert('onsubmit')">
<input type="submit" value="Bouton" />
</form>
onUnload
Quand on ferme la fenêtre.

Est utilisé sur la balise HTML body, frameset, frame .
onClick
Quand je clique.
Est utilisé sur l'objet javascript link,document, form
Est utilisé sur la balise HTML a, body, area et autre.

<body >
<input type="button" value="Appliquer" onclick="Styler()" />
<div id='div01' style="width:100px;height:100px;border:1px solid red"></div>
</body>
//at1.js
function Styler()
{
div1.style.backgroundColor="lime";
}
onDblClick
Quand on fait un double clique.

Est utilisé sur l'objet javascript link, document,area
Est utilisé sur la balise HTML a, body, area et autre.
<div style="width:100px;height:100px;border:1px solid red" ondblclick="alert('ondlclick')"></div>
onAbort
L'utilisateur a stoppé le chargement de l'image.

Est utilisé sur l'objet javascript form, window, frame
Est utilisé sur la balise HTML input, textarea, select, body, frame, frameset.
Assigner un événement
Infos

Dans ce chapitre nous allons étudier comment assigner en javascript un événement à un élément HTML .
Types d'événement
Infos
Voici les types d'événement reconnus par l'ensemble des navigateurs à quelques exceptions.
Assigner un événement
Définition
Pour assigner un événement en javascript, vous devez récupérer l'objet javascript qui correspond à la balise
html sur laquelle vous voulez mettre l'événement.

Dans l'exemple suivant, nous voulons assigner un événement onclick sur la balise div ayant comme id
"idevement".
<div id="idevement">Mon événement javascript</div>
//at1.js
function action(){
alert("mon action")
}
var momoElement = document.getElementById("idevement");
momoElement.onclick = action;
L'emploi de this
Définition
Dans la fonction qui est assignée l'événement (Element.onEvement = nomFonction), vous pouvez utiliser
this.
this représente l'objet javascript auquel on a assigné l'événement.
Par exemple nous voulons récupérer l'url du lien sur le onmouseover.
<a href="http://www.zonecss.fr/" id="idevement">Toutes les feuilles de styles css</div>
//at1.js
function action(){
alert(this.href);
//http://www.zonecss.fr/
}
L'objet event
Tableau des couleurs web
Netscape (Mozilla,Firefox) et Internet Explorer ne gèrent pas de la même façon l'objet event. Pour le premier,
l'objet event est passé en paramètre à la fonction qui gère l'événement, pour le second c'est un objet global
window.event.
L'objet event regroupe un ensemble de propriétés relatives à l'événement javascript.
Voici la méthode pour récupérer l'objet event suivant les navigateurs.
Code javascript :
function action(event){
var event = event || window.event;
}
event.type

La propriété type de l'objet event permet de récupérer le type d'événement.
En règle générale sa valeur est le nom l'événement en minuscule sans le "on". Par exemple : onclick ==
click.
Code javascript :
alert(event.type);
//click
}
event.target vs event.srcElement
La propriété target de l'objet javascript event permet de récupérer l'objet qui a déclanché l'évenement.
Encore une fois Internet Explorer ne veut pas faire comme tout le monde. Pour lui, c'est srcElement qui
représente l'objet.
Voici la méthode pour récupérer l'objet event suivant les navigateurs.

var target = event.target || event.srcElement;
alert(target.nodeName);
//DIV
}
Attention
Ce n'est pas forcement l'objet sur lequel est attaché l'événement qui sera renvoyé. Dans le cas ci-dessous si le
div a un événement onclick et que vous avez cliqué sur l'image; c'est l'objet javascript de l'image qui est
renvoyé, puisque c'est lui qui a déclanché l'événement.
<div id="idevement">Mon évènement javascript <img src="monimage.gif" id="monimage"></div>
event.clientX et event.clientY
Pour certain événement où la souris intervient comme le onclick, onmouseup, ... , l'objet event a en plus les
propriétés clientX et clientY.
Ces deux propriétés donnent la position du curseur au moment où l'événement a été effectué.
L'origine est le coin haut gauche de la zone de contenu de la fenêtre de votre navigateur.
Propagation des événements
Définition

Dans le cas où vous avez des balises imbriquées avec le même événement. Les événements se propagent du
bas vers le haut c'est à dire du fils vers le parent.
<div id="idevement">Mon évènement javascript <img src="monimage.gif" id="monimage"></div>
//at1.js
function action(){
alert("action idevement");
}
function action2(){
alert("action monimage");
}
var ImgElement = document.getElementById("monimage");
ImgElement.onclick = action2;
Arrêter la propagation
Imaginons que lorsque l'on clique sur l'image nous ne voulons pas que l'événement du parent soit déclenché.
Pour cela vous devez utiliser la propriété cancelBubble de l'object event qui permet d'arrêter la
propagation de l'événement.
Cependant Firefox conseille l'utilisation de la méthode stopPropagation() de l'objet event à la place de la
propriété cancelBubble.
Nous sommes donc obligés de coupler cancelBubble et stopPropagation.
<div id="idevement">Mon évènement javascript<img src="monimage.gif" id="monimage"></div>
//at1.js
function action(){
}
function action2(){
alert("action monimage");
if (event.stopPropagation)
{
event.stopPropagation();
}
event.cancelBubble = true;
}
var ImgElement = document.getElementById("monimage");
ImgElement.onclick = action2;

Annuler l'événement
Infos
Vous pouvez annuler l'action effectuée, par exemple sur un onsubmit (envoi du formulaire).
Pour cela vous devez utiliser la méthode javascript preventDefault() de l'object javascript event qui permet
d'annuler l'événement.
Cependant Intenet Explorer utilise la propriété javascript returnValue de l'objet event.
Nous sommes donc obligés de coupler preventDefault et returnValue.
<form action="http://www.aliasdmc.fr" target="_blank" id="idevement">
<input type="submit" value="envoyer" />
</form>
//at1.js
if (event.preventDefault) {
event.preventDefault();
}
event.returnValue = false;
}
momoElement.onsubmit = action;
Assigner un événement DOM 2
Info
Dans ce cours javascript, nous allons nous pencher sur une autre manière d'assigner un événement en
javascript.
Nous allons utiliser le modèle d'événement du DOM 2.
Le modèle d'événement du DOM 2 utilise deux méthodes, addEventListener() et removeEventListener(),
qui permettent assigner ou d'enlever un gestionnaire d'événement à un objet javascript.
La méthode addEventListener()
Définition
la méthode javascript addEventListener(nomEvent, nomFonction, typePropagation) permet d'assigner un

événement à un objet javascript.
la méthode javascript addEventListener(nomEvent, nomFonction, typePropagation) accepte comme
paramètres :
- nomEvent : valeur de type String qui spécifie le nom de l'événement sans le "on".
- nomFonction : nom de la fonction sans les "()" qui va traiter l'événement.
- typePropagation : valeur de type Boolean qui spécifie le type de propagation de l'événement.

Code html :
<div id="idevement">Mon évènement javascript <img src="monimage.gif" ></div>
//at1.js
}
momoElement.addEventListener("click", action, false);
La méthode attachEvent()
Définition
Comme nous le savons bien Internet Explorer ne fais pas comme tout le monde.
La méthode javascript addEventListener() n'est pas reconnue, il utilise
attachEvent(NomEvent,nomFonction).
La méthode javascript attachEvent(nomEvent, nomFonction) accepte comme paramètres :

- nomEvent : valeur de type String qui spécifie le nom de l'événement avec le "on".
- nomFonction : nom de la fonction sans les "()" qui va traiter l'événement.
Code html :
<div id="idevement">Mon événement javascript <img src="monimage.gif" ></div>

//at1.js
}
momoElement.attachEvent("onclick", action);
Fusion des deux méthodes
Infos
Pour que cela fonction vous devez faire un test :

Code html :
<div id="idevement">Mon événement javascript <img src="monimage.gif"></div>
//at1.js
}
if(momoElement.addEventListener){
momoElement.addEventListener("click", action, false);
}else if(momoElement.attachEvent){
momoElement.attachEvent("onclick", action);
}

Mais vous pouvez regrouper ce test dans une fonction :
function ajouteEvent(objet, typeEvent, nomFunction, typePropagation){
if (objet.addEventListener) {
objet.addEventListener(typeEvent, nomFunction, typePropagation);
} else if (objet.attachEvent) {
objet.attachEvent('on' + typeEvent, nomFunction);
}
}
}
ajouteEvent(momoElement,"click",action,false);
Supprimer un événement
Définition
Pour Netscape (FireFox,Mozilla) vous devez utiliser la méthode javascript removeEventListener(), pour
Internet Explorer vous devez utiliser detachEvent().
Nous allons donc fusionner ces deux méthodes javascript dans une seule fonction.
Code javascript :
function supprimeEvent(objet, typeEvent, nomFunction, typePropagation){
objet.removeEventListener(typeEvent, nomFunction, typePropagation);
objet.detachEvent('on' + typeEvent, nomFunction);
}
}
removeEventListener()
Pour que l'action soit enlevée de l'événement, il faut que la valeur "typePropagation" soit la même.
objet.addEventListener('click', nomFunction, true);
objet.removeEventListener(''click'', nomFunction, false);

//La fonction nomFunction est toujours appelée
objet.removeEventListener(''click'', nomFunction, false);
//La fonction nomFunction n'est plus appelée
Cummule des actions
Plusieurs actions pour un même événement

Les méthodes javascript attachEvent et addEventListener() permettent d'assigner plusieurs fonctions à un
même événement.
Pour cet exemple nous utiliserons la fonction ajouteEvent (voir Fusion des deux méthodes).
Code html :
<div id="idevement">Mon événement javascript</div>
//at1.js
alert("action");
}
function action1(event){
alert("action 1");
}
ajouteEvent(momoElement,"click",action1,false);
Cela peut vous servir pour lancer plusieurs onload. Pour que les fonctions soient déclenchées dans l'ordre
d'assignation à l'événement, vous devez mettre la propriété "typePropagation" à true.
La propagation est différente
Infos
Lorsque vous utilisez l'assignation d'événement DOM 2, Internet Explorer l'événement se propage du bas vers
le haut c'est à dire du fils vers le parent.
Netscape (Firefox/Mozilla) respect la propagation du DOM dans les deux sens. Si "typePropagation" est
égale à true l'événement se propage du haut vers le bas c'est à dire du parent vers le fils. Si
"typePropagation" est égale à false, l'événement se propage du bas vers le haut c'est à dire du fils vers le
parent.
function ajouteEvent(objet, typeEvent, nomFunction, typePropagation){
objet.addEventListener(typeEvent, nomFunction, typePropagation);
objet.attachEvent('on' + typeEvent, nomFunction);
}
}
}
//IMG
//DIV

Les Formulaires
Les éléments de formulaire sont des objets javascript .Supposons le formulaire suivant :
<form name="general">
<input type="text" name="champ1" value="Valeur initiale">
</form>
Accéder au formulaire
Le formulaire est un élément de l'objet document. Pour accéder au formulaire general, il faut écrire :
document.forms["general"] ou document.forms[0] ou document.general.
forms est le tableau des formulaires de document. On peut accéder à un formulaire par son nom ou par son
indice (commençant à 0), via le tableau elements ou directement par son nom.
Accéder à un élément
Pour accéder maintenant à la zone de texte, on écrit :

document.forms["general"].elements["champ1"] ou document.forms["general"].elements[0] ou
document.forms["general"].champ1.
elements est le tableau de tous les éléments du formulaire. On peut accéder à un élément par son nom ou
par son indice, ou directement par son nom.
Remarques :
1. Il est préférable d'utiliser le nom des éléments, plutôt que les indices : les noms sont indépendants de
l'organisation du formulaire.
2. Les tableaux forms et elements peuvent sembler inutiles dans les exemples ci-dessus. Observez
ce script pour vous convaincre du contraire :
var nom_du_champ="champ1";
document.forms[ "general "].elements[nom_du_champ].
Ici, on peut accéder à un élément de formulaire dont le nom est contenu dans une variable javascript.
Manipuler les propriétés d'un élément
Une fois que l'élément est atteint, il est possible de manipuler ces propriétés.
Par exemple, pour placer dans la zone de texte le mot "NOUVEAU", il faut juste écrire :
var input1=document.forms["general"].elements["champ1"]
input1.value="NOUVEAU";

Appeler une méthode sur un élément
Pour donner le focus au champ texte du haut de cette page, il faut appeler la méthode focus()sur cet
élément.
var input1=document.forms["general"].elements["champ1"]
input1.focus();
L'objet this
Il est fastidieux d'accéder aux éléments de formulaire par toute la chaîne document.forms.elements. Un
objet JavaScript this permet de raccourcir ce chemin d'accès.
this représente l'objet javascript en cours.
Donnez le focus à cette zone de texte, un message apparaît dans la barre de titre pour indiquer son nom.
Le message disparaît quand le champ perd le focus.
Voici le code source simplifié par this:
<form name="formfocus">
<input type="text" name="champtexte" value="contenu"
onFocus="document.title=this.value" onBlur="document.title=''">
</form>
L'accès aux éléments de type INPUT
Les zones de texte :

La principale action en javascript sur une zone de texte est de manipuler son contenu.
Imaginons un formulaire appelé monform qui possède un champ texte appelé monchamp. On accède au
contenu du champ par :
<form name="form1">
Nom :<input type="text" name="nom" value="">
</form>
/* test.js */
var inp1=document.forms["form1"].elements["nom"];
inp1.value="Tapez votre nom";
Il faut bien penser à ajouter la propriété .value pour accéder au contenu.
Les boutons :
Un bouton sert principalement à déclencher une action javascript.Nous avons déjà vu comment dans le
paragraphe Intégrer du javascript dans un événement comment détecter le click sur un bouton.
La propriété value contient le libellé du bouton. Comme pour une zone de texte, ce libellé est accessible.
Les cases à cocher

Pour détecter qu'une case est cochée, il faut utiliser sa propriété checked.
Propriété Description
name Indique le nom du contrôle. Toutes les cases à cocher portent un nom différent.
checked Indique l'état en cours de l'élément case à cocher.
defaultchecked Indique l'état du bouton sélectionné par défaut.
value Indique la valeur de l'élément case à cocher.
Exemple1 :
<form name="form1">
<input type="checkbox" name="majeur">Majeur
<input type="checkbox" name="etudiant">Etudiant
<input type="button" value="Tester"
onClick="alert('Majeur : '+document.form1.majeur.checked+'\nEtudiant : '+document.form1.etudiant.checked);">
</form>
Les radio-boutons
Imaginons ce sondage : Vous utilisez comme système d'exploitation :
name Indique le nom du contrôle. Tous les boutons portent le même nom.
index L’index ou le rang du bouton radio en commençant par 0.
checked Indique l'état en cours de l'élément radio.
defaultchecked Indique l'état du bouton sélectionné par défaut.
value Indique la valeur de l'élément radio.
Exemple 1 :
Entrez votre choix :
<form name="form1">
<input type="radio" checked name="choix" value="1">Choix numéro 1<BR>
<input type="radio" name="choix" value="2">Choix numéro 2<BR>
<input type="button"name="but" value="Quel est votre choix ?" onClick="choixProp(form1)">

</form>
/*test.js */

function choixProp(form1)
{
if (form1.choix[0].checked)
{ alert("Vous avez choisi la proposition " + form1.choix[0].value) };
}
Exemple 2 :
<form name="form1">
<input type="radio" checked name="choix" value="1">Choix numéro 1<BR>
<input type="button"name="but" value="Quel est votre choix ?" onClick="choixProp(this.form.choix)">

</form>
/*test.js */
function choixProp(choix)
{
for (var i = 0; i < choix.length; i++)
{ if (choix[i].checked)
{
alert("Système = " + choix[i].value)
}
}
}

L'accès aux éléments de type SELECT
name Indique le nom de la liste déroulante.
length Indique le nombre d'éléments de la liste. S'il est indiqué dans le tag <select>,
tous les éléments de la liste seront affichés. Si vous ne l'indiquez pas un seul
apparaîtra dans la boite de la liste déroulante.
selectedIndex Indique le rang à partir de 0 de l'élément de la liste qui a été sélectionné par
l'utilisateur.
defaultselected Indique l'élément de la liste sélectionné par défaut. C'est lui qui apparaît alors
dans la petite boite.
Exemple 1:
<form name="form1">
<select name="list">
<option value="1">Elément 1</option>
</select>
<INPUT type="button"name="b" value="Quel est l'élément retenu?" onClick="liste(form1)">
</form>
/* test.js*/
function liste(form1)
{ alert("L\'élément " + (form1.list.selectedIndex + 1)); }
Exemple 2:

<form name="form1">
<select name="liste" size=1>
<option value="valeur ligne 1">Libellé ligne 1</option>
</select>
<input type="button"name="b" value="Quel est l'élément retenu?" onClick="Liste()">
</form>
/*test.js*/

function Liste()
{
//Pour récupérer l'indice la ligne sélectionnée :
var i=document.form1.elements['liste'].selectedIndex;
console.log("i=",i);
//Pour récupérer le nombre de lignes :
var nbLigne= document.form1.elements['liste'].options.length;
console.log("nbLigne=",nbLigne);
//Pour récupérer la valeur de la ligne sélectionnée :
var val=document.form1.elements['liste'].options[document.form1.elements['liste'].selectedIndex].value;
console.log("la valeur de la ligne sélectionnée =",val);
}
Manipuler l’objet Textaera : saisie de texte multiligne
L'objet textarea est une zone de texte de plusieurs lignes. La syntaxe Html est :
<form>
<textarea name="nom" rows=x cols=y>texte par défaut</textarea>
</form>
Où rows=x représente le nombre de lignes et cols=y représente le nombre de colonnes affichées

et non pas la taille du texte !.
L'objet textarea possède plusieurs propriétés :
name Indique le nom du contrôle par lequel on pourra accéder.
defaultvalue Indique la valeur par défaut qui sera affichée dans la zone de texte.
value Indique la valeur en cours de la zone de texte. Soit celle tapée par l'utilisateur ou
si celui-ci n'a rien tapé, la valeur par défaut.
NB : En Javascript, on utilisera \n pour passer à la ligne.

Afficher le contenu par javascript :
function afficherarea(form1)
{
var testarea =document.form1.txta.value;
alert(testarea);
}

Modifier le contenu par javascript :
<form name="form1">
<textarea name="txta" rows=x cols=y onclick="modifierarea()">texte par défaut</textarea>
</form>
/*test.js*/
function modifierarea()
{
document.form1.txta.value= "ligne1\r\nligne2\r\nligne3";
}
Manipuler l’objet reset
Le contrôle reset permet d'annuler les modifications apportées aux contrôles d'un formulaire et de restaurer
les valeurs par défaut.
La syntaxe Html est :
<form name="form1">
Nom : <input type="text"><br>
<input type="reset" name="nom" value= "Annuler">
</form>
où value donne le texte du bouton.
Une seule méthode est associée au contrôle reset, c'est la méthode onClick(). Ce qui peut servir, par
exemple, pour faire afficher une autre valeur que celle par défaut.
Manipuler l’objet submit
Le contrôle submit a la tâche spécifique de transmettre toutes les informations contenues dans le formulaire
à l'URL désignée dans l'attribut action du tag <form>.
la syntaxe Html est :
<form name="form1">
Nom : <input type="text"><br>
<input type="submit" name="nom" value="Envoyer">
<input type="reset" name="nom" value= "Annuler">
</form>
Une seule méthode est associée au contrôle submit, c'est la méthode onClick().
On va déclencher les contrôles de formulaire sur l’événement Click du bouton submit en appelant une
fonction de contrôle.
forms.action
Info
La propriété javascript action de l'objet document.forms permet de connaître ou de modifier la valeur de
l'attribut HTML action de la balise HTML form.
<body >
<form name="dmc" action="aliasdmc.php">
<input type="text" value="DMC" name="nom">
</form>

</body>
La propriété javascript action de l'objet document.forms accepte comme valeur :
- url relative ou absolue.
document.forms.dmc.action="dmc.php";
La propriété javascript action de l'objet document.forms renvoie comme valeur :
- valeur de type String.
alert(document.forms.dmc.action);//dmc.php
forms.target
Info
La propriété javascript target de l'objet document.forms permet de connaître ou de modifier la valeur de
l'attribut HTML target de la balise HTML form.
<body >
<<form name="dmc" target="dmc">
</form>
</body>
La propriété javascript target de l'objet document.forms accepte comme valeur :
document.forms.dmc.target="_blank";
La propriété javascript target de l'objet document.forms renvoie comme valeur :
alert(document.forms.dmc.target);
Formulaire text
Info
Nous allons étudier les propriétés Javascript de la balise HTML <input type="text">.
La balise HTML text est un champ texte d'une seule ligne.
Vous trouverez d'autres informations pour compléter ce cours dans le chapitre :

- l'objet javascript input du Document Object Model HTML (DOM HTML)
- la balise HTML input
- les feuilles de style CSS
input type=text
<body >
<<form name="dmc" target="dmc">
<input type="text" name="nom" value="dmc">
</form>
</body>
Changer la value
Vous pouvez changer la value de l'attribut HTML "value" de la balise HTML input.
<form name="f">
<input type="text" name="dmc">

<a href="#" onMouseOver = "document.forms.f.dmc.value = 'cmd'" onMouseOut = "document.forms.f.dmc.value =
'dmc'">Change</a>
</form>
</body>
Bloquer le champ
Vous pouvez bloquer l'écriture dans la balise HTML input.
Par exemple :
dmc
<body >
<form name="f">
<input type="text" name="dmc" onfocus = "document.forms.f.dmc.blur()">
<br>essayez d'écrire dans le champ.</form>
</body>
Récupérer la valeur
Vous pouvez récupérer la valeur de la balise HTML input.
Par exemple tapez un mot dans la première case :
Code :
<body >
<form name="f">
<input type="text" name="dmc" value="dmc"><input type="text" name="cmd" value="">
<a href="javascript:void(0)" onClick = "document.forms.f.cmd.value = document.forms.f.dmc.value">Cliquez pour
transferer</a>
</form>
</body>
Les événements
onBlur : Quand on perd le focus de la balise HTML Input.
onChange : Quand on fait un changement dans la balise HTML Input (interprétée suivant le navigateur).
onFocus : Quand prend le focus de la balise HTML Input.
onSelect : Quand on sélectionne du texte dans la balise HTML Input (interprétée suivant le navigateur).
<input type="text" name="cmd" value="" onfocus="action()">
Les méthodes
blur() : Enlève le focus de la balise HTML.

focus() : Met le focus de la balise HTML.
select() : Sélectionne le contenu de la balise HTML.
handleEvent() : Gestion des événements.
document.forms.formulaire.champtext.select();

Test nombre
Info
Imaginez que votre champ ne doit contenir que de chiffre (code postal).
Code :
<form name="e">
<input type="text" name="dmc" size="8">
<input type="button" name="bout" value="Tester" onClick="test()">
</form>
<script >
function test() {
var m=parseFloat(document.forms.e.dmc.value);
if (isNaN(m))
alert("C'est pas un chiffre.");
else
alert("C'est pas un chiffre.");
}
</script>
Test Mail
Info
Tester la validité d'un Email.
Code :
<form name="e">
Email :<input type="text" name="dmc" size="8">

</form>
<script >
var inp= document.forms.ee.dmc ;
function test()
{
if ( (inp.value !="") && (inp.value.indexOf("@") !="-1") && (inp.value.indexOf(".") !="-1"))
{
alert("Email semble valide");
}else {
alert("Email semble invalide");
}
}
</script>

Formulaire textarea
Info
Dans ce cours de javascript, nous allons étudier les propriétés Javascript de la balise HTML et XHTML
<textarea>.
La balise HTML et XHTML textarea est champ texte multiligne.
La balise textarea HTML et XHTML fonctionne de la même façon que <input type="text">

- l'objet javascript TextArea du Document Object Model HTML (DOM HTML)
- la balise HTML textarea.
<form name="e">
<textarea name="nom" value="dmc"></textarea>
</form>
Changer la valeur
Vous pouvez changer la valeur du contenu de la balise HTML:
Par exemple :
dmc
Passez la souris sur le lien
<form name="f">
<textarea name="dmc"></textarea>
<a href="#" onMouseOver = "document.forms.f.dmc.value='cmd'" onMouseOut = "document.forms.f.dmc.value =
'dmc'">Change</a>
</form>
Bloquer le champ
Vous pouvez bloquer la saisie dans la balise HTML et XHTML Texarea:
dmc
<form name="f"><textarea name="dmc" onfocus = "document.forms.f.dmc.blur()"></textarea>

</form>
Vous pouvez récupérer la valeur du champ :
Taper un mot dans la première case :

dmc
Cliquez moi pour changer
<form name="fff">
<textarea name="dmc">dmc</textarea>
<textarea name="cmd"></textarea>
<a href="javascript:void(0)" onClick = "document.forms.fff.cmd.value = document.forms.fff.dmc.value">Changer</a>
</form>
Les événements
onBlur Quand on perd le focus de la balise HTML textarea.

onChange Quand on fait un changement dans la balise HTML textarea (interprétée suivant le navigateur).
onFocus Quand on prend le focus de la balise HTML textarea.
onSelect Quand on sélectionne du texte dans la balise HTML textarea (interprétée suivant le navigateur).
onKeyDow Quand on presse une touche dans la balise HTML textarea (interprétée suivant le navigateur).
onKeyPress Quand une touche est pressée dans la balise HTML textarea (interprétée suivant le navigateur).
onKeyUp Quand on lâche une touche dans la balise HTML textarea (interprétée suivant le navigateur).
<form name="fff">
<textarea name="dmc" onfocus = "Action()"></textarea>
</form>
Les méthodes
blur() Enlève le focus de la balise HTML textarea.

focus() Met le focus dans la balise HTML textarea.
select() Sélectionne le contenu de la balise HTML textarea.
handleEvent() Gestion des événements.
document.forms.formulaire.textarea.blur();
Formulaire radio
Info
Dans ce cours javascript, nous allons étudier les propriétés javascript de la balise HTML <input
type="radio">
La balise HTML et XHTML radio va vous permettre de proposer un ensemble de choix avec une seule
possibilité de sélection.

- l'objet javascript Input du Document Object Model HTML (DOM HTML),

input type=radio
Changer la valeur
<form name="rd">
<input type="radio" name="radio" value="radio">
</form>
Vous pouvez changer la valeur de l'attribut HTML "value" du bouton radio HTML.
Cliquer pour connaître la valeur initiale Cliquez pour changer
<form name="r">
<input type="radio" name="dmc" value="radio">
<input type="radio" name="dmc" value="autre">
<a href = "javascript:alert(document.forms.r.dmc[0].value);"> valeur initiale </a>
<a href = "document.forms.r.dmc[0].value = 'cmd'; alert(document.forms.r.dmc[0].value)"> Change </a>
</form>
Sélectionner
Vous pouvez sélectionner le bouton Radio HTML .
Change
<form name="r">
<input type="checkbox" name="dmc">
<a href="#" onMouseOver = "document.forms.c.dmc.checked = true" onMouseOut = "document.forms.c.dmc.checked =
false">Change</a>
</form>
Les événements
onBlur Quand on perd le focus d'un bouton Radio HTML.

onClick Quand clique sur un bouton Radio HTML.
onFocus Quand on prend le focus sur un bouton Radio HTML.
<form name="r">
<input type="checkbox" name="dmc" onclick="action()">= false">
</form>
Les méthodes
blur() Enlève le focus d'un bouton Radio HTML.

focus() Met le focus sur un bouton Radio HTML.
click() Simule le clique sur un bouton Radio HTML.
Exemple

<form name="ee">
Choix 1 <input type="radio" name="dmc" value="radio">

<input type="button" name="bout" value="Tester" onClick="teste()">
</form>
//at1.js
function teste() {
var m=0;
for (i=0;i<6;i++) {
if (document.forms.ee.dmc[i].checked==true) {
m=i;
alert("C'est le choix "+Number(i+1)+" qui est sélectionné");
break;
}
}
}
Formulaire checkbox
Info
Nous allons étudier les propriétés Javascript de la balise HTML <input type="checkbox">.
La balise HTML checkbox est une case que l'on peut cocher ou décocher.

- L'objet javascript Input du Document Object Model HTML (DOM HTML)
input type=checkbox
Changer la valeur
<form name="ee">
<input type="checkbox" name="checkbox" value="checkbox">
</form>
Vous pouvez changer la valeur de l'attribut HTML "value" de la case à cocher Chekbox.
Par exemple :
Cliquez pour connaître la valeur initiale

cliquez pour changer

<form name="c">
<input type="checkbox" name="dmc" value="checkbox">
<a href = "alert(document.forms.c.dmc.value);"> valeur initiale</a>
<a href="document.forms.c.dmc.value='cmd'; alert(document.forms.c.dmc.value)"> Change</a>
</form>
Sélectionner
Vous pouvez sélectionner un case à cocher Chekbox.
Par exemple :
Passez la souris sur ce lien
<form name="c">
<input type="checkbox" name="dmc">
<a href="#" onMouseOver = "document.forms.c.dmc.checked= true" onMouseOut = "document.forms.c.dmc.checked =
false">Change</a>
</form>
Les événements
onBlur Quand on perd le focus de la case à cocher Chekbox.

onClick Quand on clique sur la case à cocher Chekbox.
onFocus Quand on prend le focus sur la case à cocher Chekbox.
<form name="c">
<input type="checkbox" name="dmc" onclick="action()">
</form>
Les méthodes
blur() Enlève le focus sur la case à cocher Chekboxfocus() Met le focus sur la case à cocher Chekbox
click() Simule un clique sur la case à cocher Chekbox
document.forms.formulaire.checkbox.click();
Exemple
< form name="e">

Choix 1 <input type="checkbox" name="checkbox1" value="checkbox">
Choix 6 <input type="checkbox"> name="checkbox6" value="checkbox">
</form>

//at1.js
function test() {
var m=0;
for (i=1;i<7;i++) {
if (eval("document.forms.e.checkbox"+i+".checked == true")){
m=m+1;
}
}
if (m>=3) {
alert("Vous avez fait 3 choix ou plus");
}else {
alert("Vous devez cocher 3 choix ou plus");
}
}
Formulaire select
Info
Dans ce cours javascript, nous allons étudier les propriétés Javascript de la balise HTML <SELECT>.
La balise HTML select va vous permettre de créer une liste déroulante à sélection unique, soit à sélection
multiple.
select Choix unique
< form name="s">

<select name="nom">
<option></option>
<option></option>
</select>
</form>
Changer la value
Vous pouvez changer connaître ou modifier la value de l'attribut HTML "value" d'une option :
<form name="f">
<select name="dmc">
<option value="Choix 1" selected> Choix 1 </option>
<option value="Choix 2"> Choix 2 </option>
</select>
<a href="#" onClick=" alert(document.forms.f.dmc.options[2].value) ">Avant</a>
<a href="#" onClick="document.forms.f.dmc.options[2].value ='cmd'; alert(document.forms.f.dmc.options[2].value)">Après</a>
</form>
Idem pour menus aux choix multiples.

Option sélectionnée
Vous pouvez trouver l'index l'option sélectionnée :
<form name="f">
<select name="dmc">
option value="Choix 1" selected> Choix 1 </option>
option value="Choix 2"> Choix 2 </option>
option value="Choix 3"> Choix 3 </option>
</select>
<a href="#" onClick = "alert('Choix '+(( document.forms.ff.dmc. options.selectedIndex) + 1) );"> Voir l'option sélectionnée. </a>
</form>
Ajouter
Vous pouvez ajouter une option :

Par exemple, visualisez le menu avant de cliquer:
<form name="f">
<select name="dmc">
option value="Choix 1" selected>Choix 1</option>
option value="Choix 2">Choix 2</option>
option value="Choix 3">Choix 3</option>
</select>
<a href="#" onClick=ajoute();">Voir l'option selectionnée.</a>
</form>
//at1.js
function ajoute(){
document.forms.f.dmc.options[document.forms.f.dmc.options.length] = new Option('dmc','cmd');
}
Supprimer
Vous pouvez supprimer le contenu d'une option :

<form name="f">
<select name="dmc">
<option value="Choix 1" selected>Choix 1</option>
<option value="Choix 2">Choix 2</option>
</select>

<a href="#" onClick=ajoute();"> Voir l'option sélectionnée.</a>
</form>
//at1.js
function ajoute(){
document.forms.fff.dmc.options[1]=new Option(' ',' ');
// ou
//document.forms.fff.dmc.options[1]=null;
}
Vous pouvez supprimer définitivement une option :

Par exemple, visualisez le menu avant de cliquer :
<form name="f">
<select name="dmc">
</select>
<a href="#" onClick=ajouteSup();">Supprimer l'option du menu.</a>
</form>
//at1.js
function ajouteSup(){
n=1; // index de l'option a supprimer
for (i = n; i < Number(document.forms.f.dmc.options.length-1); i++){
document.forms.ff.dmc.options[i] = new Option((document.forms.f.dmc.options[ Number(i+1) ].text
),(document.forms.f.dmc.options[ Number(i+1) ].value) );
}
document.forms.ff.dmc.options.length--;
}
Idem pour menus aux choix multiples.
Les événements
onBlur Quand on perd le focus de l'objet formulaire Select.

onChange Quand on fait un changement d'option dans l'objet formulaire Select.
onFocus Quand on prend le focus de l'objet formulaire Select.
<form name="f">
<select name="dmc" onchange="action()">
</select>
<a href="#" onClick=ajouteSup();">Supprimer l'option du menu.</a>
</form>
Les méthodes

blur(), Enlève le focus de l'objet formulaire Select.
focus() Met le focus de l'objet formulaire Select
document.forms.formulaire.select.blur();
select Choix multiple
<form name="f">
<select name="nom" multiple >
<option></option>
<option></option>
</select>
</form>
Récupérer les options séléctionnées
Vous pouvez récupérer les options sélectionnées :

Par exemple, sélectionnez plusieurs options :
<form name="f" multiple size="5>

<select name="dmc">
</select>
<a href="#" onClick=evaluation();">Evaluer.</a>
</form>
//at1.js
function evaluation(){
var selectione="";
var Num=0;
for (i=0; i<document.forms.f.dmc.options.length; i++) {
if (document.forms.f.dmc. options[i].selected ) {
Num=Number(Num+1);
selectione = selectione+"; "+document.forms.f.dmc.options[i].text;
}
}
alert(Num+" choix : "+selectione);
}

Ajouter
Vous pouvez ajouter une option :

<form name="f" multiple size="5>

<select name="dmc">
<option value="Choix 1" selected> Choix 1 </option>
</select>
<a href="#" onClick=ajoute ();">Ajouter une option.</a>
</form>
//at1.js
function ajoute(){
document.forms.f.dmc.options[document.forms.f.dmc.options.length] = new Option('dmc','cmd');
}
La vraie écriture de new Option est :

new Option('dmc', 'cmd', defaultSelect, select);
defaultSelect et select prennent la valeur de true ou false.

Chez moi, Internet Explorer me fait une grosse erreur "action non conforme" et se ferme. Alors bien tester
avant d'utilisé cette forme.
Formulaire button
Info
Nous allons étudier les propriétés Javascript de la balise HTML :

<input type="reset">, qui permet de réinitialiser le formulaire HTML.
<input type="submit">, qui permet d'envoyer le formulaire HTML.
<input type="image">, qui permet d'envoyer le formulaire HTML mais à la place du bouton on spécifie une
image.
<input type="button"> qui permet d'afficher un bouton de formulaire n'a aucune action.
reset()
Info

<form name="f" >
<input type="reset">
</form>
Pour remettre à jour un formulaire via le javascript, il ne faut plus utiliser la balise HTML <input
type="reset"> mais la balise HTML <input type="button">.
A cette dernière nous lui associerons un événement, généralement un "onclick" avec la méthode reset().
<form name="f" >
<input type="button" onClick="document.forms.f.reset()">
</form>
<form name="f">
<input type="text" name="textfield">
<input type="button" onClick="document.forms.f.reset()">
</form>
submit()
Info
<form name="f">
<input type="submit">
</form>
Pour envoyer un formulaire via le javascript, il ne faut plus utiliser la balise HTML <input type="submit">
mais la balise HTML <input type="button">.
A cette dernière nous lui associerons un événement, généralement un "onclick" avec la méthode submit().
<form name="f">
<input type="button" onClick="document.forms.f.submit()">
</form>
<form name="f">
<input type="text" name="champ">
<input type="button" onClick="document.forms.f.submit()">
</form>
image
Info
<form name="f">
<input type="image">
</form>
Pour renvoyer un formulaire via le javascript, il ne faut plus utiliser la balise HTML <input type="image">
mais une image avec un lien <a href="#">.
A ce dernier, nous lui associerons un événement, généralement un "onclick" avec la methode submit().
<a href="#" onClick = "document.forms.f.submit()"> <img src="monimage.gif"> </a>
<form name="f">
</form>
<a href="#" onClick="document.forms.f.submit()"><img src="monimage.gif"></a>
L'image avec le lien peut être dans ou en dehors du formulaire.

Vous pouvez aussi mettre une image pour la méthode reset(), voiçi une autre manière d'écrire :
<form name="f">
</form>
<a href = "javascript:document.forms.f.reset()"> <img src="monimage.gif"> </a>

Exemple Complet :
Réalisons un formulaire comme suit et faisons le code javascript contrôlant ses différents contrôles.
Le code html – css et javascript:

<h1>Formulaire</h1>
<form name="formulaire" action="traitement.php" method="get" onsubmit=" return valider_Formulaire(this)">
<table>
<tr><td><label for="nom"> Nom: </label></td><td><input type="text" size="40" name="nom" id="nom"/> </td></tr>
<tr><td><label for="lieu">Résidence: </label></td><td><input type="text" size="40" name="lieu" id="lieu"/></td></tr>
<tr><td><label for="courrier">Mail: </label></td><td><input type="text" size="40" name="courrier"
id="courrier"/></td></tr>
<tr><td><label for="age">Âge: </label></td><td> <input type="text" size="40" name="age" id="age"/></td></tr>
<tr><td><label>sexe :</label></td><td>
<input type="radio" id="sexeM" name="sexe" value="M"/><label for="sexeM">M</label>
<input type="radio" id="sexeF" name="sexe" value="F"/><label for="sexeF">F</label></td></tr>
<tr><td><label>Langue Parlée:</label></td><td>
<input type="checkbox" id="fr" name="lp" value="fr"/><label for="fr">FR</label>
<input type="checkbox" id="ar" name="lp" value="ar"/><label for="ar">AR</label>
<input type="checkbox" id="eng" name="lp" value="eng"/><label for="eng">ENG</label>
</td> </tr>
<tr> <td><label for="profession">Profession: </label></td>

<td><select id="profession" name="profession">
<option>Selectionner une option</option>
<option value="M">Menuisiser</option>
<option value="F">Forgeron</option>
<option value="T">Technicien</option>
<option value="S">Secrétaire</option>
</select></td></tr>
<tr><td>Formulaire:</td>
<td><input type="submit" value="Envoyer"/><input type="reset" value="Annuler"/></td></tr>
</table>
</form>
/* texp.js */
function valider_Formulaire(frm)
{ //-1 : Le nom doit etre non vide
var strNom=frm.nom.value.toUpperCase();
if(strNom== "") {
alert("Veuillez entrer votre nom!");
frm.nom.focus();
return false;
}
//-2 : Le nom ne doit contenir ni chiffres ni caractères spéciaux!
for (var i=0;strNom.length;i++)
if (strNom.charAt(i) < "A" || strNom.charAt(i) > "Z" )
{
alert("pas de chiffres dans le nom ni de caractères spéciaux!");
frm.nom.value="";
frm.nom.focus();
return false;
}
var strLieu=frm.lieu.value;
//-3 : Le lieu de residence doit etre non vide
if(strLieu == "")
{
alert("Veuillez entrer votre lieu de résidence!");
frm.lieu.focus();
return false;
}
var strCourier=frm.courrier.value;
//-4 : L'adresse electronique doit etre non vide

if(strCourier == "") {
alert("Veuillez entrer votre adresse électronique!");
frm.courrier.focus();
return false;
}
//-5: L'adresse électronique doit contenir les deux caracteres @ et .
if(strCourier.indexOf('@') == -1 || strCourier.indexOf('.') == -1)
{
alert("Ce n'est pas une adresse électronique!");
frm.courriel.focus();
return false;
}
var strAge=frm.age.value;
//6-L'Age doit etre non vide
if(strAge == "") {
alert("Veuillez entrer votre âge!");
frm.age.focus();
return false;
}
//6-L'Age doit etre un nombre
if(isNaN(strAge))
{
alert("l'âge doit être un nombre!");
frm.age.focus();
return false;
}
//7-Un seul boutton radio doit etre coché
if ( ( frm.sexe[0].checked == false ) && ( frm.sexe[1].checked == false ) )
{
alert ( "Veuillez choisir votre sexe" );
return false;
}
//8-Au minimum Un seul boutton checkbox doit etre coché
if ( frm.lp[0].checked == false && frm.lp[1].checked == false && frm.lp[2].checked == false )
{
alert ( "Veuillez cocher vos langues parlées" );
return false;
}
//9-Au minimum il faur selectionner un element
if ( frm.profession.selectedIndex == 0 )
{
alert ( "Veuiller selectionner votre profession" );
return false;
}
return true;
}
/*exp.css*/
body
{
background-color: lightgrey;
}
FIN

Langue

07 Chap07 Events Formulaires

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

07 Chap07 Events Formulaires

Transféré par

Droits d'auteur :

Formats disponibles

Les événements

Quand on change le contenu.

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 1

<select name="color" id="color" >

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 2

Lorsqu'il se produit une erreur de script.

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 3

Quand un objet gagne le focus.

Lorsque l'objet perd le focus.

Quand j'appuie sur la touche.

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 4

Quand j'appuie sur une touche.

<input type="text" id="inp" onkeypress="Afficher()"/>

onKeyUp < == > onInput

Quand je lâche la touche.

<input type="text" id="inp" onkeyup="Afficher()"/>

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 5

Quand le bouton de la souris est appuyé.

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 6

Quand le curseur bouge.

Quand je sors du lien.

<div style="width:100px;height:100px;border:1px solid red" onmouseout="alert('onmouseout')"></div>

Quand je passe sur le lien

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 7

<div style="width:100px;height:100px;border:1px solid red" onmouseover="alert('onmouseover')"></div>

Quand le bouton de la souris est relâché.

<div style="width:100px;height:100px;border:1px solid red" onmouseup="alert('onmouseup')"></div>

Quand je déplace la fenêtre.

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 8

Quand j'envoie un formulaire.

Quand on ferme la fenêtre.

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 9

Quand on fait un double clique.

<div style="width:100px;height:100px;border:1px solid red" ondblclick="alert('ondlclick')"></div>

L'utilisateur a stoppé le chargement de l'image.

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 10

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 11

Tableau des couleurs web

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 12

Voici la méthode pour récupérer l'objet event suivant les navigateurs.

Propagation des événements

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 13

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 14

Assigner un événement DOM 2

la méthode javascript addEventListener(nomEvent, nomFonction, typePropagation) permet d'assigner un

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 15

La méthode javascript attachEvent(nomEvent, nomFonction) accepte comme paramètres :

<div id="idevement">Mon événement javascript <img src="monimage.gif" ></div>

Fusion des deux méthodes

Pour que cela fonction vous devez faire un test :

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 16

objet.removeEventListener(''click'', nomFunction, false);

Cummule des actions

Plusieurs actions pour un même événement

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 17

La propagation est différente

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 18

Pour accéder maintenant à la zone de texte, on écrit :

Manipuler les propriétés d'un élément

ISTA HAY SALAM/ FORMATEUR : AHBOUZ Page 19

L'accès aux éléments de type INPUT

Les zones de texte :

Il faut bien penser à ajouter la propriété .value pour accéder au contenu.