Maison > Article > interface Web > Réponse aux événements en JS

Réponse aux événements en JS

不言original: 2018-04-04 13:39:211350parcourir

Le contenu de cet article concerne la réponse temporelle de js. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent également se référer au contenu de cet article

Voici quelques réponses temporelles couramment utilisées. , l'utilisation est simple et l'effet est très bon.

1. Déclencheur d'appui sur une touche

Ce type de réponse événementielle est très courant, et on le rencontre également dès le début. Pour donner un exemple simple :

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>点击确认查看日期</p>  
    <button onclick="myFunction()">确认</button>  
    <p id="demo"></p>  
    <script>  
    function myFunction() {  
        document.getElementById("demo").innerHTML =Date();  
}  
</script>  
</body>

Le cœur de ce type de méthode est d'ajouter onclick+nom de la fonction à l'étiquette du bouton pour déclencher la fonction.

2. Déclenchez la souris ou entrez le déclencheur.

Les défauts de la première méthode sont en réalité très évidents. Par exemple, si je souhaite traiter un lot de données et qu’il existe de nombreuses zones de saisie, dois-je ajouter une clé de confirmation après chaque zone ? Ceci est très déraisonnable pour la saisie de l'utilisateur, il sera donc beaucoup plus efficace d'utiliser la souris ou la touche Entrée pour déclencher l'effet lors du remplissage d'un formulaire ou de plusieurs zones de saisie.

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>请输入下列表框</p>  
	<label>表框一</label><input type="text" id="t1" onchange="myFunction()"/>  
    <p id="demo1"></p>  
    <script>  
    function myFunction() {  
        var x = document.getElementById("t1").value;
		document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}  
</script>  
</body>

Le noyau est d'utiliser onchange pour appeler la fonction dans la zone de saisie. Après avoir rempli, la fonction sera appelée en cliquant n'importe où avec la souris ou en appuyant sur Entrée. Différents effets apparaîtront selon différents. traitement.

3. Déclenchez à tout moment

Cette utilisation est encore meilleure Pour des exemples concrets, vous pouvez essayer la conversion hexadécimale en ligne sur la page Web, qui fait. ne vous oblige pas à appuyer sur la touche de confirmation, vous pouvez le saisir à tout moment et le convertir à tout moment. Y compris la calculatrice du téléphone mobile, il calcule la valeur d'entrée en temps réel.

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>请输入下列表框</p>  
	<label>表框一</label><input type="text" id="t1" onKeyUp="myFunction()"/>  
    <p id="demo1"></p>  
    <script>  
    function myFunction() {  
        var x = document.getElementById("t1").value;
		document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}  
</script>  
</body>

Le cœur de la méthode d'utilisation est oneKeyUp + nom de la méthode. En plus de cela, il existe également des mots-clés onkeypress, oneKeyDown, etc. Personnellement, je pense que oneKeyUp est plus pratique.

Recommandations associées :

Implémentation JS d'un exemple de réponse aux événements des compétences OCX control_javascript

Notes d'étude complètes sur la réponse aux événements Javascript _javascript compétences

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：Comment implémenter la pagination Ajax sans actualiserArticle suivant：Comment implémenter la pagination Ajax sans actualiser

Articles Liés

Voir plus