Maison >interface Web >Questions et réponses frontales >Comment déclencher du code javascript ? trois méthodes

Comment déclencher du code javascript ? trois méthodes

PHPz
PHPzoriginal
2023-04-14 15:42:461732parcourir

JavaScript est un langage d'écriture de pages Web interactives qui permet aux utilisateurs d'interagir avec la page en y ajoutant du code JavaScript. Le code JavaScript peut être écrit directement dans le fichier HTML ou séparément dans un fichier .js externe. De plus, les bibliothèques JavaScript regorgent de fonctions et de méthodes utiles pour simplifier le processus de développement.

JavaScript est largement utilisé dans le développement Internet actuel et il existe de nombreuses façons de déclencher JavaScript. Dans cet article, nous verrons comment déclencher JavaScript.

1. Déclencher JavaScript via des événements

JavaScript peut être déclenché via des événements, tels que cliquer sur un bouton, saisir un formulaire, etc. Voici quelques méthodes de déclenchement d'événements couramment utilisées :

1. Méthode onClick()

Ajoutez la méthode onClick() au bouton HTML pour déclencher la fonction JavaScript lorsque vous cliquez sur le bouton. L'exemple de code est le suivant :

<button onClick="myFunction()">点击我</button>

<script>
function myFunction() {
  alert("Hello World!");
}
</script>

2. Méthode addEventListener()

Vous pouvez également utiliser la méthode addEventListener() pour ajouter des écouteurs d'événements aux éléments HTML afin d'implémenter l'écoute de plusieurs événements. Par exemple, lorsque la souris entre ou sort d'un élément, vous pouvez déclencher une fonction JavaScript pour l'événement correspondant. L'exemple de code est le suivant :

<button id="myBtn">点击我</button>

<script>
document.getElementById("myBtn").addEventListener("mouseenter", mouseEnter);
document.getElementById("myBtn").addEventListener("mouseleave", mouseLeave);

function mouseEnter() {
  document.getElementById("myBtn").style.backgroundColor = "blue";
}

function mouseLeave() {
  document.getElementById("myBtn").style.backgroundColor = "red";
}
</script>

2. Déclenchez JavaScript via timer

Vous pouvez également utiliser des minuteries pour déclencher des fonctions JavaScript, par exemple en utilisant la méthode setInterval(). Voici un exemple dans lequel une boîte de dialogue Hello World apparaît toutes les secondes après l'ouverture de la page.

<script>
setInterval(function() {
  alert("Hello World!");
}, 1000);
</script>

3. Déclencher JavaScript en exécutant DOM

JavaScript exécutant DOM est très courant et il est facile de déclencher les événements correspondants. Par exemple, lorsque vous utilisez JavaScript pour remplacer le texte d'un élément en HTML, vous pouvez déclencher l'événement correspondant. L'exemple de code est le suivant :

<div id="myDiv">Hello World!</div>

<script>
document.getElementById("myDiv").addEventListener("click", changeText);

function changeText() {
  document.getElementById("myDiv").innerHTML = "新的文本";
}
</script>

Voici quelques méthodes courantes pour déclencher JavaScript. Avec la mise à jour et le développement continus de la technologie, de nombreuses nouvelles méthodes ont vu le jour. La maîtrise de ces compétences peut nous permettre de mieux développer des pages Web plus interactives.

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