Comment exécuter une fonction quand on clique sur un bouton?

Question

Quelle est la meilleure pratique pour exécuter une fonction quand un bouton est cliqué en JavaScript sans utiliser jQuery?

Je suis à la recherche d'une solution qui ressemble à ceci:

var button = document.getElementById('myButton'); 

function sayHello() { 
    alert('hello'); 
} 

button.attachFunctionToClick(sayHello); 

Answer 1

La façon dont les normes de fixation des événements est comme ceci:

var button = document.getElementById("myButton"); 
button.addEventListener("click", sayHello, false); 

Read more

versions plus anciennes de (c.-à- moins de 9) ne supportent pas addeventlistener et vous devrez revenir à la fonction attachEvent.

button.attachEvent('click',sayHello); 

Bien sûr, vous pouvez toujours juste ajouter à la méthode onclick de l'élément comme celui-ci:

button.onclick = sayHello 

Les 3 exemples ci-dessus supposent que vous n'êtes pas passer des paramètres aux fonctions de rappel, ce qui signifie que les seuls arguments qu'ils recevront seront l'objet événement.

Answer 2

var button = document.getElementById('myButton'); 
function sayHello() { 
    alert('hello'); 
} 

if(document.addEventListener) 
    button.addEventListener('click',sayHello,false); 
else 
    button.attachEvent('click',sayHello); 

Answer 3

<script> 
    function test() { 
     alert('aaa'); 
    } 
</script> 

<input type="button" onclick="test()" /> 

ou

<input type="button" id="myButton" /> 

Cela va à la fin de la page avant la balise body proche:

<script> 
    function test() { 
     alert('aaa'); 
    } 
    var button = document.getElementById('myButton'); 
    button.onclick = test; 
</script> 

Answer 4

Pour le respect du navigateur, voici une simple fonction d'aide:

function setEvent (element, event, handler) { 
    if(document.addEventListener){ 
    element.addEventListener(event, handler); 
    }else{ 
     element.attachEvent("on" + event, handler, false); 
    } 
}; 

IMPORTANT: Notez le "on" + event ici. Il est utilisé pour les événements dans IE. Voir plus here.

EXAMPLE

ou vous pouvez essayer:

button.onclick = sayHello; 

Parce qu'il était essentiellement une partie de DOM 0, cette méthode est très largement soutenu et ne nécessite aucun code navigateur spécial; par conséquent, il est normalement utilisé pour enregistrer dynamiquement les écouteurs d'événements à moins que les fonctionnalités supplémentaires de addEventListener() soient nécessaires.

EXAMPLE

attachEvent - Utilisé pour IE 9 <:

Associe la fonction spécifiée à un événement, de sorte que la fonction se appelée chaque fois que l'événement se déclenche sur l'objet.

addEventListener:

addEventListener() enregistre un écouteur unique d'événements sur une seule cible . La cible d'événement peut être un seul élément dans un document, le document lui-même, une fenêtre ou un XMLHttpRequest.

Pour enregistrer plusieurs écouteurs d'événements pour la cible, appelez addEventListener() pour la même cible mais avec différents types d'événement, écouteurs d'événement ou paramètres de capture.