recherche

Maison  >  Article  >  interface Web  >  Quels événements y a-t-il dans js ? Introduction aux événements courants en js

Quels événements y a-t-il dans js ? Introduction aux événements courants en js

不言
不言original
2018-09-18 10:08:1810354parcourir

JavaScript nous donne la possibilité de créer des pages dynamiques. Les événements sont des comportements pouvant être détectés par JavaScript. Chaque élément d'une page Web peut générer certains événements qui déclenchent des fonctions JavaScript. Alors, quels sont les événements dans js ? Cet article vous présentera les événements couramment utilisés en js.

Sans plus attendre, allons droit au but.

1. Événement Onclick, un événement couramment utilisé en js

Événement Click (onclick n'est pas une méthode en js, onclick est juste une interface dom fournie par le navigateur pour js, afin que js puisse faire fonctionner le DOM, donc onclick est sensible à la casse. Par exemple, le code HTML n'a pas besoin d'être sensible à la casse).

Exemple de code pour l'événement onclick en js : 

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
    functionmyFunction(){
       alert("测试onclick点击事件");
    }
    </script>
</head>
<body>
<center>
<buttononclick="myFunction()">点击这里</button>
</center>
</body>
</html>

Explication :

onclick est généralement généré dans les objets de base suivants :

bouton (objet bouton), case à cocher (case à cocher), radio (bouton radio), réinitialisation boutons (bouton de réinitialisation), boutons de soumission (bouton de soumission)

2. L'événement onload, un événement couramment utilisé en js,

peut être exécuté par body, < ;bodyonload="alert (123)">36cc49f0c466276486e50c850b7e4956, où vous pouvez écrire une méthode après le chargement, telle que : onload="test()", puis écrire une méthode test() en JavaScript, puis quand la page commence à se charger. Appelez d'abord cette méthode.

Exemple de code pour l'événement onload en js : 

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
    functiontest(){
       alert("测试onload方法");
    }
    </script>
</head>
<bodyonload="test()">
</body>
</html>

Remarque : Cette méthode ne peut être écrite que dans la balise 6c04bd5ca3fcae76e30b72ad730ca86d

3. L'événement onchange, un événement courant en js,

est déclenché lorsque le contenu change. Il peut être utilisé pour des objets tels que des zones de texte et des zones de liste. Cet événement est généralement utilisé pour répondre à d'autres changements provoqués par la modification du contenu par l'utilisateur.

Exemple de code d'un événement onchange en js :

Explication : Lorsque l'utilisateur saisit du texte dans une zone de texte, l'événement onchange ne sera pas déclenché, seulement l'utilisateur Une fois la saisie terminée, cliquez sur la zone en dehors de la zone de texte pour déclencher cet événement lorsque la zone de texte perd le focus. S'il s'agit d'une zone déroulante, il sera déclenché une fois la sélection terminée. 
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
       functionupperCase(){
         varx = document.getElementById("fname").value;
         document.getElementById("fname").value = x.toUpperCase();
        }
     </script>
</head>
<body>
 <p>
 <labelfor="name">用户名：</label>
 <inputtype="text"id="fname"onchange="upperCase()"value=""/>
</p>
</body>
</html>

L'effet de l'exemple ci-dessus est que lorsque la zone de saisie perd le focus, le contenu est converti en majuscules. Cela se produit parce que l'entrée doit perdre le focus avant que les modifications de contenu puissent être détectées. L'événement change est généralement utilisé pour les balises de sélection de menu déroulant.


4. Événement Onblur et événement onfocus, événements couramment utilisés en js

Cet événement est déclenché lorsque l'élément actuel perd le focus, et l'événement onfocus correspondant : obtient le focus Événement ; événement onblur : l'élément perd le focus.


Exemples de code de l'événement onblur et de l'événement onfocus en js : 

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
  functionchkvalue(txt) {
  if(txt.value=="") alert("文本框里必须填写内容!");
  }
 functionsetStyle(x){
      document.getElementById(x).style.background="yellow"
 }
 </script>
</head>
<body>
失去焦点：
 <inputtype="text"name="name"value=""size="30"onblur="chkvalue(this)"><br>
得到焦点：
    <inputtype="text"id="name"value=""size="30"onfocus="setStyle(this.id)">
</body>
</html>
Événement Onscroll des événements couramment utilisés en js

Événement de défilement de fenêtre : fonction appelée lorsque la page défile. Cet événement est écrit en dehors de la méthode sans parenthèses après le nom de la fonction, par exemple window.onscroll=move.

Exemple de code d'un événement onscroll en js :

6. Événement Onsubmit d'événements communs en js 
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
  functionmove() {
  alert("页面滚动时调用");
  }
window.onscroll = move;
 </script>
</head>
<body>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</body>
</html>

Il appartient à l'élément de formulaire ff9c23ada1bcecdd1a0fb5d5a0f18437 et est écrit dans la balise de formulaire ff9c23ada1bcecdd1a0fb5d5a0f18437. Syntaxe : onsubmit="retourner le nom de la fonction()".

Exemple de code de l'événement onsubmit en js :

7. Événements couramment utilisés en js : événements liés à la souris 
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
  functionmove() {
  alert("测试onsubmit........"+testForm.name.value);
  }
 </script>
</head>
<body>
<formaction=""method="post"name="testForm"onsubmit="returnmove()">
    <inputtype="text"name="name"value="">
    <br>
    <inputtype="submit"name="submit"value="测试onsubmit"/>
</form>
</body>
</html>

. Onmouseover : Lorsque la souris se déplace au-dessus de la plage d'un objet, un événement est déclenché pour appeler la fonction. Remarque : Dans une même zone, quel que soit votre déplacement, la fonction ne se déclenchera qu'une seule fois.

Onmouseout : Lorsque la souris quitte la portée d'un objet, un événement est déclenché pour appeler la fonction.

Onmousemove : Lorsque la souris se déplace au-dessus de la plage d'un objet, un événement est déclenché pour appeler la fonction. Remarque : Dans la même zone, un événement est déclenché tant que la souris bouge une fois.

Exemple de code : 

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionbigImg(x)
{
x.style.height="180px";
x.style.width="180px";
}
functionnormalImg(x)
{
x.style.height="128px";
x.style.width="128px";
}
</script>
</head>
<body>
<imgonmousemove="bigImg(this)"onmouseout="normalImg(this)"border="0"src="images/defaultAvatar.gif"alt="Smiley">
</body>
</html>
Onmouseup : événement déclencheur lorsque la souris est relâchée

Onmousedown : lorsque la souris est enfoncée Déclencher un événement lorsque la touche est enfoncée

Exemple de code :

Ce qui précède représente l'intégralité du contenu de cet article. Pour plus d'informations sur les événements js, veuillez vous référer à.

manuel de développement js 
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionmouseDown(){
    document.getElementById("p1").style.color="red";
}
functionmouseUp(){
    document.getElementById("p1").style.color="green";
}
</script>
</head>
<body>
<pid="p1"onmousedown="mouseDown()"onmouseup="mouseUp()">
请点击文本！mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色mouseUp(。) 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。
</p>
</body>
</html>
.

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Quels sont les six types de données en javascript ? js et logique de conversion implicite commune (introduction)Article suivant：Quels sont les six types de données en javascript ? js et logique de conversion implicite commune (introduction)

Articles Liés

Voir plus