Connaissance des événements JavaScript HTML DOM-js tutoriel-php.cn

Connaissance des événements JavaScript HTML DOM

jacklove

Libérer： 2018-05-07 11:10:11

original

1155 Les gens l'ont consulté

Les événements JavaScript HTML DOM jouent un rôle important dans js. Cet article fournit une explication détaillée de ses connaissances associées.

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

Exemple 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 se déplace sur l'élément

Lorsque le champ de saisie est modifié

Lorsque le formulaire HTML est soumis

Lorsque l'utilisateur déclenche une pression sur une touche

Dans ce cas, lorsque l'utilisateur clique sur l'icône

element , changera son contenu :

Instance

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML=&#39;Ooops!&#39;">点击文本!</h1>
</body>
</html>

Copier après la connexion

Cet exemple appelle une fonction depuis le gestionnaire d'événements :

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

Copier après la connexion

HTML Attributs d'événement

Pour attribuer un événement à un élément HTML, vous pouvez utiliser l'attribut event.

Attribuez l'événement onclick à l'élément bouton :

<button onclick="displayDate()">点这里</button>

Copier après la connexion

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 aux éléments HTML :

Attribuer des événements onclick aux éléments de bouton :

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

Copier après la connexion

Dans l'exemple ci-dessus, la fonction nommée displayDate est affectée à l'élément HTML avec id="myBtn". La fonction Javascript sera exécutée lorsque le bouton

sera cliqué.

Événements onload et onunload

Les événements onload et onunload sont déclenchés lorsque l'utilisateur entre ou quitte la page. L'événement

onload peut être utilisé pour détecter le type et la version du navigateur du visiteur et charger la version correcte de la page Web en fonction de ces informations.

Les événements onload et onunload peuvent être utilisés pour gérer les cookies.

Instance

<body onload="checkCookies()">

Copier après la connexion

é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.

Instances

<input type="text" id="fname" onchange="upperCase()">

Copier après la connexion

É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.

Les événements onmousedown, onmouseup et onclick

onmousedown, onmouseup et onclick constituent toutes les parties de l'événement 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é.

Cet article fournit une certaine compréhension des connaissances pertinentes sur les événements DOM. Pour plus de matériel d'apprentissage, veuillez prêter attention au site Web php chinois pour le consulter.

Recommandations connexes :

Connaissances connexes et application des appels de fonctions JavaScript

Compréhension et utilisation des événements de synchronisation JavaScript

Comprendre et utiliser les cookies JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!