onclick événement

Objet de l' événement

Exemple

Exécuter un script JavaScript quand un bouton est cliqué:

<button onclick="myFunction()">Click me</button>

Essayez vous - même »

Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.

Définition et utilisation

L'événement onclick se produit lorsque l'utilisateur clique sur un élément.

Support du navigateur

un événement
onclick	Oui	Oui	Oui	Oui	Oui

Syntaxe

En HTML:

< Essayez vous - même »

JavaScript:

object .onclick=function(){ Essayez vous - même »

En JavaScript, en utilisant la addEventListener() méthode:

object .addEventListener("click", myScript );

Essayez vous - même »

Note: Le addEventListener() méthode est pas prise en charge dans Internet Explorer 8 et les versions antérieures.

Détails techniques

Bulles:	Oui
cancelable:	Oui
Type d'événement:	MouseEvent
Pris en charge les balises HTML:	Tous les éléments HTML, SAUF: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title>
DOM Version:	Niveau 2 Événements

autres exemples

Exemple

Cliquez sur un <button> élément pour afficher le jour, la date et l' heure:

Essayez vous - même »

Exemple

Cliquez sur <p> élément pour changer sa couleur de texte en rouge:

<p id="demo" onclick="myFunction()">Click me to change my text color.</p>

<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>

Essayez vous - même »

Exemple

Un autre exemple sur la façon de changer la couleur d'un <p> élément en cliquant dessus:

<p id="demo" onclick="myFunction(this, 'red')">Click me to change my text color.</p>

<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>

Essayez vous - même »

Exemple

Cliquez sur un bouton pour copier un texte à partir d'un champ de saisie à un autre champ d'entrée:

<button onclick="myFunction()">Copy Text</button>

<script>
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>

Essayez vous - même »

Exemple

Affectez la "onclick" événement à l'objet de la fenêtre:

window.onclick = myFunction;

// If the user clicks in the window, set the background color of <body> to yellow
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}

Essayez vous - même »

Exemple

En utilisant onclick pour créer un bouton de menu déroulant:

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
}
}

Essayez vous - même »