web-dev-qa-db-fra.com

Comment changer le gestionnaire onClick de manière dynamique?

Je suis sûr qu'il y a un million de publications à ce sujet, mais étonnamment, j'ai du mal à trouver quelque chose. 

J'ai un script simple où je veux définir le gestionnaire onClick pour un lien <A> lors de l'initialisation de la page.

Lorsque je lance ceci, je immédiatement reçois un message d'alerte 'foo' où je m'attendais à ne recevoir une alerte que lorsque je clique sur le lien.

Qu'est-ce que je fais mal stupide? (J'ai essayé click = et onClick =) ...

<script language="javascript">

    function init(){

        document.getElementById("foo").click = new function() { alert('foo'); };
    }

</script>

<body onload="init()">
    <a id="foo" href=#>Click to run foo</a>
</body>

Edit: J'ai changé ma réponse acceptée en réponse jQuery. La réponse de ' Már Örlygsson ' est techniquement la réponse correcte à ma question initiale (click devrait être onclick et new devrait être enlevé) mais je décourage fortement quiconque d'utiliser 'document.getElementById (. ..) directement dans leur code - et d'utiliser jQuery à la place.

javascriptfunction
48
Simon_Weaver

jQuery:

$('#foo').click(function() { alert('foo'); });

Ou si vous ne voulez pas qu'il suive le lien href:

$('#foo').click(function() { alert('foo'); return false; });
22
Darryl Hein

Essayer:

document.getElementById("foo").onclick = function (){alert('foo');};
68
CMS

Utilisez .onclick (tout en minuscule). Ainsi:

document.getElementById("foo").onclick = function () {
  alert('foo'); // do your stuff
  return false; // <-- to suppress the default link behaviour
};

En fait, vous aurez probablement intérêt à utiliser une bonne bibliothèque (je recommande jQuery pour plusieurs raisons) pour vous permettre de démarrer et d’écrire en JavaScript.

Les compatibilités entre navigateurs sont un bon enfer pour quiconque - encore moins pour quelqu'un qui vient de commencer.

35
Már Örlygsson

J'ai essayé plus ou moins toutes les autres solutions l'autre jour, mais aucune d'entre elles n'a fonctionné pour moi avant d'avoir essayé celle-ci:

var submitButton = document.getElementById('submitButton');
submitButton.setAttribute('onclick',  'alert("hello");');

Autant que je sache, cela fonctionne parfaitement.

10
Selin Ebeci

Si vous souhaitez transmettre des variables de la fonction actuelle, vous pouvez par exemple:

document.getElementById("space1").onclick = new Function("lrgWithInfo('"+myVar+"')");

Si vous n'avez pas besoin de transmettre des informations à partir de cette fonction, c'est simplement:

document.getElementById("space1").onclick = new Function("lrgWithInfo('13')");
9
yuttadhammo

OMG ... Ce n'est pas seulement un problème de "bibliothèque jQuery" et "getElementById".

Bien sûr, jQuery nous aide à mettre de côté les problèmes entre navigateurs, mais utiliser la méthode traditionnelle sans bibliothèques peut toujours fonctionner, si vous comprenez vraiment JavaScript ASSEZ !!!

@ Már Örlygsson et @Darryl Hein vous ont tous deux donné de bons ALTARNATIFS (je dirais qu'ils ne sont que des mots d'autel, pas des réponses), où les premiers utilisaient la méthode traditionnelle et la dernière manière jQuery. Mais connaissez-vous vraiment la réponse à votre problème? Quel est le problème avec votre code?

Tout d'abord, .click est une méthode jQuery. Si vous voulez utiliser la méthode traditionnelle, utilisez plutôt .onclick. Ou je vous recommande de vous concentrer sur l'apprentissage de l'utilisation de jQuery uniquement, en cas de confusion. jQuery est un bon outil à utiliser sans connaître suffisamment le DOM.

Le deuxième problème, également le problème critique, new function(){} est une syntaxe très mauvaise ou, disons, une syntaxe incorrecte.

Que vous souhaitiez utiliser jQuery ou non, vous devez le préciser.

Il y a 3 façons de base de déclarer une fonction:

function name () {code}

... = function() {code} // known as anonymous function or function literal

... = new Function("code") // Function Object

Notez que javascript est sensible à la casse , donc new function() n'est pas une syntaxe standard de javascript. Les navigateurs peuvent mal comprendre la signification.

Ainsi, votre code peut être modifié en utilisant le second moyen

 = function(){alert();}

Ou en utilisant la troisième voie comme

 = new Function("alert();");

En le développant, la deuxième manière fonctionne presque comme la troisième, et la deuxième est très commune, alors que la troisième est rare. Vos deux meilleures réponses utilisent la deuxième façon.

Cependant, la troisième manière peut faire quelque chose que la seconde ne peut pas faire, à cause du "runtime" et du "temps de compilation". J'espère juste que vous savez que new Function() peut être utile parfois. Un jour, vous rencontrez des problèmes avec function(){}, n'oubliez pas new Function().

Pour en savoir plus, il est recommandé de lire << JavaScript: Le Guide définitif, 6ème édition >>, O'Reilly.

5
Eric

Je conviens que l'utilisation de jQuery est la meilleure option. Vous devez également éviter d'utiliser la fonction onload de body et utiliser plutôt la fonction ready de jQuery. Quant aux écouteurs d'événement, ils devraient être des fonctions qui prennent un argument:

document.getElementById("foo").onclick = function (event){alert('foo');};

ou en jQuery:

$('#foo').click(function(event) { alert('foo'); }
2
kgiannakakis

Voici la contrepartie de YUI aux messages jQuery ci-dessus.

<script>
  YAHOO.util.Event.onDOMReady(function() {   
    document.getElementById("foo").onclick =  function (){alert('foo');};
  });
</script>
1
blak3r

Personne n’a abordé le problème réel qui se posait pour expliquer pourquoi l’alerte avait été lancée. 

Ce code: document.getElementById("foo").click = new function() { alert('foo'); }; affecte la propriété click de l'élément #foo à un objet vide. La fonction anonyme ici est destinée à initialiser l'objet. J'aime penser à ce type de fonction en tant que constructeur. Vous mettez l'alerte à l'intérieur pour qu'elle soit appelée car la fonction est appelée immédiatement. 

Voir cette question . 

0
Steven Lu

Je pense que vous voulez utiliser les méthodes .bind et .unBind de jQuery. Lors de mes tests, la modification de l'événement click à l'aide de .click et .onclick a en fait appelé l'événement nouvellement attribué, ce qui a entraîné une boucle sans fin. 

Par exemple, si les événements avec lesquels vous basculez sont hide () et unHide (), et qu'un clic sur l'un d'eux fait basculer l'événement click sur l'autre, vous vous retrouveriez dans une boucle continue. Une meilleure façon serait de faire ceci:

$(element).unbind().bind( 'click' , function(){ alert('!') } );
0
lamarant

L'exemple YUI ci-dessus devrait vraiment être:

<script>
  YAHOO.util.Event.onDOMReady(function() {   
     Dom.get("foo").onclick =  function (){alert('foo');};
  });
</script>
0
Web Development Guy