Comment attacher des gestionnaires d'événements à des éléments de document à la volée en utilisant Javascript?

StackOverflow https://stackoverflow.com/questions/1411545

  •  05-07-2019
  •  | 
  •  

Question

Existe-t-il un moyen d'attacher un gestionnaire d'événements comme onclick = alert (" Hi "); à un élément de document existant? (une image dans mon cas)

J'ai déjà essayé et échoué avec les éléments suivants: 

img = document.getElementById("my_image");

img.onclick = "alert('hi')";

img.setAttribute ('onclick',"alert('hi')");

img.onclick = function() {"alert('hi')";};

img.onclick = function(evt) {"alert('hi')";};

img.setAttribute ('onclick',function() {"alert('hi')";});

function handler(evt) {"alert('hi')";}
img.onclick = handler;

Je suis à court d’idées. Est-ce que quelqu'un sait comment faire cela?

Était-ce utile?

La solution

La première réponse de zzandy devrait bien se passer. Vérifiez que vous faites tout correctement, en particulier firefox peut être difficile de s’assurer qu’il est en mode compatible. Voici le code complet. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
function AttachEvent()
{
    var theElement = document.getElementById( 'the_image' );
    theElement.onclick = function () { alert('message'); }
}
</script>
</head>
<body>
<img id='the_image' src='some_img.jpg' title='Click on the image' alt='Image not found' />
<button onclick='AttachEvent();'>Enable Click on image</button>
</body>
</html>

Autres conseils

element.onclick = function(event){alert("message");}

L'argument event est facultatif dans ce cas. Le corps de la fonction est un code, pas une chaîne. 

img = document.getElementById("my_image");

img.onclick = "alert('hi')";

Ceci assigne une chaîne. 

img.setAttribute ('onclick',"alert('hi')");

Ceci assigne également une chaîne. 

img.onclick = function() {"alert('hi')";};

Ceci assigne une fonction, mais toute la fonction contient est une chaîne. Vous devez supprimer les guillemets autour de alert('hi'). 

img.onclick = function(evt) {"alert('hi')";};

Encore une fois, une fonction qui ne contient qu'une chaîne. 

img.setAttribute ('onclick',function() {"alert('hi')";});

Encore une fois ... 

function handler(evt) {"alert('hi')";}
img.onclick = handler;

Et encore. 

<body>
<input type="image" id="myImageInput">

<script type="text/javascript">
var theImageInput = document.getElementById('myImageInput');
theImageInput.onclick = function () { alert('myImageInput onclick invoked!'); }
</script>
</body>

Testé et fonctionnant dans Firefox 3.5.3.

Points importants:

  • Vous devez obtenir une référence à l'élément après son affichage dans le document.
  • Firefox n’est pas comme Internet Explorer en ce sens qu’il ne fait pas du nom / id de chaque élément une variable globale. myImageInput.onclick = ... ne fonctionnera pas dans Firefox, vous devez utiliser document.getElementById(theID) ou document.forms['formName'].elements['elementNAME'] (s'il se trouve dans un <form>) pour obtenir une référence.

Si l'exemple ci-dessus copié et collé dans un document ne fonctionne pas pour vous dans Firefox 3.5, veuillez désactiver tous vos modules complémentaires (peut-être que l'un d'eux pose un problème). Si cela ne fonctionne toujours pas, veuillez modifier votre question pour nous indiquer votre source exacte, afin que nous puissions vous expliquer pourquoi. t fonctionne.

ça se réveille! 

<img src="PathToImage" id="myImage" height="30px" width="30px" />

<script type="text/javascript">
    var i = document.getElementById("myImage");
    i.onclick = function() { alert("hello"); };
</script>

EDIT: - Testé dans IE 7, Chrome 4x, FF 3.5x 

img.onclick = function() { alert('hi'); };
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top