Javascript évènements

<button id="monbouton" name="button">Click me</button>
<script>
  function faire_un_truc(){
    // faire quelque chose
    alert('truc fait');
  }
  document.getElementById('monbouton').addEventListener('click', faire_un_truc);
    //ou
  document.querySelector('#monbouton').addEventListener('click', faire_un_truc);
    // pour enlever
  document.querySelector('#monbouton').removeEventListener('click', faire_un_truc);
    // avec la fonction incorporé
  document.querySelector('#monbouton').addEventListener("click", function(){
     alert('truc fait');
  });
    // idem avec référence à l'objet appelant (le bouton devient rouge)
  document.querySelector('#monbouton').addEventListener("click", function(){
     this.style.backgroundColor = "red";
  });
</script>
// Autre façon code plus facile à maintenir car le bouton appelle l'action
// avec les listener il n'est pas rare de s'y perdre
<button  onClick="faire_un_truc();">Click me</button>
     

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

five + three =