Événements JavaScript



Les événements HTML sont des choses qui arrivent aux éléments HTML.

JavaScript peut déclencher ces événements lorsqu'il est utilisé dans des pages HTML.


Événements HTML

Les événements HTML peuvent être des comportements de navigateur ou des comportements d'utilisateurs.

Voici des exemples d'événements HTML :

  • Le chargement de la page HTML est terminé

  • Modifications du champ de saisie HTML

  • Bouton HTML cliqué

Habituellement, lorsqu'un événement se produit, vous pouvez faire quelque chose.

JavaScript peut exécuter du code lorsqu'un événement est déclenché.

Des attributs d'événement peuvent être ajoutés aux éléments HTML et du code JavaScript peut être utilisé pour ajouter des éléments HTML.

Citations simples :

<un-élément-HTMLun-événement='du JavaScript'>

guillemets doubles :

<un-élément-HTMLun-événement="du JavaScript">

Dans l'exemple suivant, l'attribut onclick (et le code) est ajouté à l'élément bouton :

Exemple

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

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

</body>
</html>

Exécuter l'exemple»

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

Dans l'exemple ci-dessus, le code JavaScript modifiera le contenu de l'élément id="demo" .

Dans l'instance suivante, le code modifiera le contenu de son propre élément (en utilisant this.innerHTML) :

Instance

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

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

</body>
</html>

Exécuter l'instance»

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

NoteJavaScript代码通常是几行代码。比较常见的是通过事件属性来调用:

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


Événements HTML courants

Voici quelques listes d'événements HTML courants :

事件描述
onchangeHTML 元素改变
onclick用户点击 HTML 元素
onmouseover用户在一个HTML元素上移动鼠标
onmouseout用户从一个HTML元素上移开鼠标
onkeydown用户按下键盘按键
onload浏览器已完成页面的加载

Plus de listes d'événements : Manuel de référence JavaScript - Événements HTML DOM.


Que peut faire JavaScript ? Les événements

peuvent être utilisés pour gérer la validation du formulaire, la saisie de l'utilisateur, le comportement de l'utilisateur et les actions du navigateur :

  • L'événement est déclenché au chargement de la page

  • L'événement est déclenché à la fermeture de la page

  • L'utilisateur clique sur le bouton pour effectuer l'action

  • Vérifier la validité de la saisie de l'utilisateur

  • etc...

Vous pouvez utiliser plusieurs méthodes pour exécuter le code d'événement JavaScript :

  • Les attributs d'événement HTML peuvent exécuter directement du code JavaScript

  • Les attributs d'événement HTML peuvent appeler des fonctions JavaScript

  • Vous Vous pouvez spécifier vos propres gestionnaires d'événements pour les éléments HTML

  • Vous pouvez empêcher les événements de se produire.

  • Attendez...

Note在 HTML DOM 章节中你将会学到更多关于事件及事件处理程序的知识。