Événements DOM



HTML DOM donne à JavaScript la possibilité de réagir aux événements HTML.


Réagir aux événements

Nous pouvons exécuter JavaScript lorsqu'un événement se produit, par exemple lorsqu'un utilisateur clique sur un élément HTML.

Pour exécuter du code lorsque l'utilisateur clique sur un élément, ajoutez du code JavaScript à un attribut d'événement HTML :

onclick=JavaScript

Exemples d'événements HTML :

  • Lorsque l'utilisateur clique sur la souris

  • Lorsque la page Web est chargée

  • Lorsque l'image est chargée

  • Lorsque la souris est déplacée sur l'élément

  • Lorsque le champ de saisie est modifié

  • Lorsque le formulaire HTML est soumis

  • Lorsque l'utilisateur déclenche l'appui sur la touche

Dans ce cas, lorsque Lorsque l'utilisateur clique sur l'élément <h1>, son contenu sera modifié :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Cet exemple appelle une fonction à partir du gestionnaire d'événements :

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">点击文本!</h1>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne


Attributs de l'événement HTML

Pour attribuer des événements aux éléments HTML, vous pouvez utiliser les propriétés de l'événement.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Dans l'exemple ci-dessus, la fonction nommée displayDate sera exécutée lorsque le bouton sera cliqué.


Utiliser HTML DOM pour attribuer des événements

HTML DOM vous permet d'utiliser JavaScript pour attribuer des événements à des éléments HTML :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Dans l'exemple ci-dessus, la fonction nommée displayDate est attribué Donnez l'élément HTML avec id=myButn".

La fonction Javascript sera exécutée lorsque le bouton sera cliqué.


événements onload et onunload

onload et les événements onunload seront déclenchés lorsqu'un utilisateur entre ou quitte une page, l'événement

onload peut être utilisé pour détecter le type de navigateur et la version du navigateur du visiteur et charger la version correcte de la page en fonction de ces informations. L'événement onunload peut être utilisé pour gérer les cookies

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body onload="checkCookies()">

<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>
<p>弹窗-提示浏览器cookie是否可用。</p>
	
</body>
</html>

Exécuter l'instance»
Cliquez sur "Exécuter l'instance". bouton pour voir en ligne Exemple


événement onchange

l'événement onchange est souvent utilisé en conjonction avec la validation des champs de saisie.

Voici un exemple d'utilisation d'onchange. Lorsque l'utilisateur modifie le contenu du champ de saisie, la fonction upperCase() est appelée.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后,函数将被触发,将小写字母转为大写字母。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


Événements onmouseover et onmouseout

Les événements onmouseover et onmouseout peuvent être utilisés pour déclencher des fonctions lorsque la souris de l'utilisateur se déplace sur ou hors d'un élément HTML.

Exemple

Un exemple simple de onmouseover-onmouseout :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

Exécuter instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne


événements onmousedown, onmouseup et onclick

onmousedown, onmouseup et onclick Constitue 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

Un exemple simple onmousedown-onmouseup :

Merci

Plus d'exemples

onmousedown et onmouseup
Changer une image lorsque l'utilisateur appuie sur le bouton de la souris.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function lighton(){
	document.getElementById('myimage').src="/upload/course/000/000/009/5804353cb2562758.gif";
}
function lightoff(){
	document.getElementById('myimage').src="/upload/course/000/000/009/580432b53cb5d221.gif";
}
</script>
</head>

<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="/upload/course/000/000/009/580432b53cb5d221.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

onload
Une fois le chargement de la page terminé, affichez une boîte de dialogue.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function mymessage(){
	alert("消息在 onload 事件触发后弹出。");
}
</script>
</head>

<body onload="mymessage()"></body>

</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

onfocus
Modifie la couleur d'arrière-plan d'un champ de saisie lorsqu'il obtient le focus.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function myFunction(x){
	x.style.background="yellow";
}
</script>
</head>
<body>

输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时,修改背景色(background-color属性) 将被触发。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Événements de souris
Lorsque le pointeur se déplace sur l'élément, changez sa couleur ; lorsque le pointeur sort du texte, il changera à nouveau de couleur.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<h1 onmouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文字上</h1>

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne