Détecter l'événement click de l'élément avec JavaScript/jQuery
Cet article explique comment détecter les événements de clic sur un élément à l'aide de JavaScript et jQuery.
Il existe plusieurs façons d'écouter les événements de clic avec JavaScript et jQuery.
1. Utiliser jQuery
Avec jQuery, vous pouvez utiliser le .on() méthode pour attacher des gestionnaires d'événements à un ou plusieurs éléments. Le code suivant illustre son utilisation en attachant un gestionnaire d'événements click à un bouton d'envoi.
JS
|
1 2 3 4 5 6 |
$(document).ready(function() { $("#submit").on('click', function(event) { alert("Submit button is clicked!"); event.preventDefault(); }); }); |
HTML
|
1 |
<button id="submit">Submit</button> |
Il existe une méthode abrégée dans jQuery pour le .click() event pour attacher des gestionnaires d'événements.
JS
|
1 2 3 4 5 6 |
$(document).ready(function(event) { $("#submit").click(function() { alert("Submit button is clicked!"); event.preventDefault(); }); }); |
HTML
|
1 |
<button id="submit">Submit</button> |
2. Utiliser JavaScript
Avec JavaScript pur, vous pouvez utiliser le EventTarget.addEventListener() méthode pour se lier à l'événement click d'un élément.
JS
|
1 2 3 4 5 |
document.getElementById("submit") .addEventListener("click", function(event) { alert("Submit button is clicked!"); event.preventDefault(); }); |
HTML
|
1 |
<button id="submit">Submit</button> |
Alternativement, vous pouvez utiliser le onclick gestionnaire pour spécifier un écouteur d'événement pour recevoir les événements de clic.
JS
|
1 2 3 4 |
document.getElementById("submit").onclick = function(event) { alert("Submit button is clicked!"); event.preventDefault(); } |
HTML
|
1 |
<button id="submit">Submit</button> |
Il s'agit de détecter l'événement click d'un élément dans JavaScript et jQuery.
Déclenchez un bouton cliquez sur la touche Entrée avec JavaScript/jQuery
Détecter les clics en dehors d'un élément HTML avec JavaScript/jQuery
Masquer un div en cliquant à l'extérieur avec JavaScript/jQuery