Comment obtenir l'élément source d'événement javaScript?

Existe-t-il un moyen de récupérer la source d'élément d'un appel javaScript en ligne?

J'ai un bouton comme ceci:

<button onclick="doSomething('param')" id="id_button">action</button>

Remarque:

Le bouton est généré à partir du serveur
Je ne peux pas modifier le processus de génération
Plusieurs boutons sont générés sur la page, j'ai le contrôle uniquement du côté client.

Ce que j'ai essayé:

 function doSomething(param){ var source = event.target || event.srcElement; console.log(source); }

Sur le firebug, je reçois un événement n'est pas défini

Modifier: après quelques réponses, une suppression de la gestion des événements à l'aide de jQuery est très acceptable. Mon problème est de savoir comment appeler la fonction onClick d'origine avec ses compteurs originaux et sans connaître le nom de la fonction.

code:

 <button onclick="doSomething('param')" id="id_button1">action1</button> <button onclick="doAnotherSomething('param1', 'param2')" id="id_button1">action2</button>. <button onclick="doDifferentThing()" id="id_button3">action3</button> . . and so on..

Donc, la substitution serait:

 $(document).on('click', 'button', function(e) { e.preventDefault(); var action = $(this).attr('onclick'); /** * What to do here to call * - doSomething(this, 'param'); if button1 is clicked * - doAnotherSomething(this, 'param1', 'param2'); if button2 is clicked * - doDifferentThing(this); if button3 is clicked * there are many buttons with many functions.. */ });

Vous devez modifier le HTML généré pour ne pas utiliser le javascript en ligne, et utiliser plutôt addEventListener .

Si vous ne pouvez en aucun cas modifier le code HTML, vous pouvez obtenir les attributs onclick , les fonctions et les arguments utilisés, et le "convertir" à un javascript discret à la place en supprimant les onclick et en utilisant les auditeurs d'événements.

Nous commençons par obtenir les valeurs des attributs

 $('button').each(function(i, el) { var funcs = []; $(el).attr('onclick').split(';').map(function(item) { var fn = item.split('(').shift(), params = item.match(/\(([^)]+)\)/), args; if (params && params.length) { args = params[1].split(','); if (args && args.length) { args = args.map(function(par) { return par.trim().replace(/('")/g,""); }); } } funcs.push([fn, args||[]]); }); $(el).data('args', funcs); // store in jQuery's $.data console.log( $(el).data('args') ); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="doSomething('param')" id="id_button1">action1</button> <button onclick="doAnotherSomething('param1', 'param2')" id="id_button1">action2</button>. <button onclick="doDifferentThing()" id="id_button3">action3</button>

Votre html devrait être comme ceci:

 <button onclick="doSomething" id="id_button">action</button>

Et renommer votre paramètre d'entrée à un événement comme celui-ci

 function doSomething(event){ var source = event.target || event.srcElement; console.log(source); }

Résoudrait votre problème.

En guise de note, je suggérerais de jeter un oeil à jQuery et javascript discret

Essayez quelque chose comme ça

  <html> <body> <script type="text/javascript"> function doSomething(event) { var source = event.target || event.srcElement; console.log(source); alert('test'); if(window.event) // IE8 and earlier { //doSomething } else if(e.which) // IE9/Firefox/Chrome/Opera/Safari { //doSomething } } </script> <button onclick="doSomething('param')" id="id_button">action</button> </body> </html>

Vous pouvez passer this lorsque vous appelez la fonction

 <button onclick="doSomething('param',this)" id="id_button">action</button> <script> function doSomething(param,me){ var source = me console.log(source); } </script>

Je crois que la solution par @slipset était correcte, mais n'était pas compatible avec les navigateurs.

Selon Javascript.info , les événements (lorsqu'ils sont référencés dans des événements de balisage externes) sont compatibles avec les navigateurs une fois que vous assurez qu'il est défini avec cette ligne simple: event = event || window.event event = event || window.event .

Donc, la fonction complète du navigateur croisé ressemblerait à ceci:

 function doSomething(param){ event = event || window.event; var source = event.target || event.srcElement; console.log(source); }

USE .live ()

  $(selector).live(events, data, handler);

À partir de jQuery 1.7, la méthode .live () est obsolète. Utilisez .on () pour attacher les gestionnaires d'événements.

 $(document).on(events, selector, data, handler);