Maison > Article > interface Web > Interprétation détaillée du pilote d'événement client JavaScript (tutoriel graphique)

Interprétation détaillée du pilote d'événement client JavaScript (tutoriel graphique)

亚连original: 2018-05-21 10:14:231303parcourir

Je vais maintenant vous proposer une brève discussion sur le pilote d'événement côté client basé sur JavaScript. Permettez-moi de le partager avec vous maintenant et de le donner comme référence pour tout le monde.

Nous savons qu'après le développement de l'orientation objet, presque tous les langagespeuvent être basés sur des objets "du jour au lendemain", et JavaScript est aussi un langage basé sur les objets. Le comportement de l'utilisateur sur le navigateur est appelé un « événement », et une série d'actions déclenchées par la suite, telles que des fenêtres contextuelles, la modification de la taille du navigateur, la vérification et le balabala, sont toutes appelées « pilotées par un événement ». Bien entendu, cette fois, je présenterai principalement quelques événements fréquents.

ps : La prise en charge des scripts js dépend du navigateur ! ! ! Certains navigateurs de version inférieure peuvent ne pas le prendre en charge ! ! !

1. Événement clic (onClick)

Qu'est-ce qu'un événement clic ? Lorsque l'utilisateur clique sur le bouton de la souris, un événement de clic est généré. En même temps, le gestionnaire d'événements spécifié par onclick sera appelé. Habituellement utilisé sur les boutons (objets bouton), les cases à cocher (cases à cocher), les radios (boutons radio), les boutons de réinitialisation (boutons de réinitialisation) et les boutons de soumission (boutons de soumission).

Agrandir le mouvement :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之单击事件</title>

</head>
<body>
<form>
  <script language="JavaScript">
    function aclick(){
      alert("你刚才单击了按钮");
    }
  </script>
  <input type="button" value="按钮" onclick= "aclick()" />
</form>

</body>
</html>

L'effet est le suivant :

2. 🎜>

Une fois que l'utilisateur modifie la valeur du formulaire, l'événement onchange sera déclenché.

Le code est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之更改事件</title>
  <script language="JavaScript">
    function check() {
      alert("文本框的值发生了变化");
    }
  </script>
</head>
<body>
<form>
  <input type="text" value="这是一个文本框" name="name" onchange="check()"/>
</form>
</body>
</html>

L'effet est le suivant :

3. onSelect)

Lorsqu'un élément de la page est sélectionné, l'événement onselect est déclenché.

Le code est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之更改事件</title>
  <script language="JavaScript">
    function check() {
      alert("文本框的值发生了变化");
    }
  </script>
</head>
<body>
<form>
  <input type="text" value="这是一个文本框" name="name" onchange="check()"/>
</form>
</body>
</html>

L'effet est le suivant :

4. onLoad)

L'événement de chargement est un événement déclenché lorsque la page Web vient d'être ouverte.

Le code est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之加载事件</title>
  <script language="JavaScript">
    function check(){
      alert("莫急莫急，小D正在骑马来的路上,O(∩_∩)O哈哈~");
    }
  </script>
</head>
<body onload="check()">
</body>
</html>

L'effet est le suivant :

5. beforeunload)

Pour être précis, il est plus approprié d'appeler "l'événement avant de quitter la page". Cet événement est déclenché lorsque vous cliquez sur le bouton de fermeture de l'onglet actuel.

Le code est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之卸载前事件</title>
  <script language="JavaScript">
    function check1(){
      alert("你真的要离我而去呢？╥﹏╥...");
    }
  </script>
</head>
<body onbeforeunload= "check1()">
<h1>这是用来验证卸载前事件的页面</h1>
</body>
</html>

L'effet est le suivant :

Ce qui précède est ce que j'ai compilé pour tout le monde . J'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus