Comment fonctionne le Javascript en ligne (en HTML)?

Je sais que c'est une mauvaise pratique. N'écrivez pas de code comme celui-ci si possible.

Bien sûr, nous nous trouverons toujours dans des situations où un extrait intelligent de Javascript en ligne peut résoudre un problème rapidement.

Je poursuis cette requête dans l'intérêt de comprendre pleinement ce qui se passe (et les pièges potentiels) quand quelque chose comme ceci est écrit:

<a href="#" onclick="alert('Hi')">Click Me</a>

Autant que je sache, c'est fonctionnellement le même que

<script type="text/javascript">
   $(function(){ // I use jQuery in this example
       document.getElementById('click_me').onclick = 
           function () { alert('Hi'); };
   });
</script>
<a href="#" id="click_me">Click Me</a>

En extrapolant à partir de cela, il semble que la chaîne affectée à l'attribut onclicksoit insérée dans une fonction anonyme qui est affectée au gestionnaire de clics de l'élément. Est-ce vraiment le cas?

Parce que je commence à faire des choses comme ça:

<a href="#" onclick="$(this).next().fadeIn(); return false;">Display my next sibling</a> <!-- Return false in handler so as not to scroll to top of page! --> 

Ce qui fonctionne. Mais je ne sais pas à quel point c'est un hack. Cela semble suspect car il n'y a aucune fonction apparente qui est renvoyée!

Vous pourriez demander, pourquoi faites-vous ça, Steve? Inline JS est une mauvaise pratique!

Eh bien, pour être tout à fait honnête, je suis fatigué d'éditer trois sections différentes de code juste pour modifier une section d'une page, en particulier lorsque je ne fais que prototyper quelque chose pour voir si cela fonctionnera. C'est tellement plus facile et parfois même logique que le code spécifiquement lié à cet élément HTML soit défini directement dans l'élément: quand je décide 2 minutes plus tard que c'était une idée terrible, terrible, je peux détruire le div entier (ou peu importe ) et je n'ai pas un tas de mystérieux crottes JS et CSS qui traînent dans le reste de la page, ralentissant très légèrement le rendu. Ceci est similaire au concept de localité de référence, mais au lieu de manquer de cache, nous examinons les bogues et le gonflement du code.

Vous l'avez presque correct, mais vous n'avez pas pris en compte la thisvaleur fournie au code en ligne.

<a href="#" onclick="alert(this)">Click Me</a>

est en fait plus proche de:

<a href="#" id="click_me">Click Me</a>
<script type="text/javascript">
document.getElementById('click_me').addEventListener("click", function(event) {
    (function(event) {
        alert(this);
    }).call(document.getElementById('click_me'), event);
});
</script>

Les gestionnaires d'événements en ligne sont définis comme étant thiségaux à la cible de l'événement. Vous pouvez également utiliser une fonction anonyme dans un script en ligne

<a href="#" onclick="(function(){alert(this);})()">Click Me</a>

Ce que fait le navigateur lorsque vous avez

<a onclick="alert('Hi');" ... >

est de définir la valeur réelle de "onclick" sur quelque chose comme:

new Function("event", "alert('Hi');");

Autrement dit, il crée une fonction qui attend un paramètre "événement". (Eh bien, IE ne le fait pas; cela ressemble plus à une simple fonction anonyme.)

Il semble y avoir beaucoup de mauvaises pratiques lancées autour des attributs du gestionnaire d'événements. Une mauvaise pratique consiste à ne pas connaître et utiliser les fonctionnalités disponibles là où cela est le plus approprié. Les attributs d'événement sont entièrement des normes documentées du W3C et il n'y a rien de mauvais à leur sujet. Ce n'est pas différent de placer des styles en ligne, qui est également documenté par le W3C et peut être utile dans le temps. Que vous le placiez ou non dans des balises de script, il sera interprété de la même manière.

https://www.w3.org/TR/html5/webappapis.html#event-handler-idl-attributes

La meilleure façon de répondre à votre question est de la voir en action.

<a id="test" onclick="alert('test')"> test </a> ​

Dans le js

var test = document.getElementById('test');
console.log( test.onclick ); 

Comme vous le voyez dans console, si vous utilisez chrome, il imprime une fonction anonyme avec l'objet événement transmis, bien que ce soit un peu différent dans IE.

function onclick(event) {
   alert('test')
}

Je suis d'accord avec certains de vos points concernant les gestionnaires d'événements en ligne. Oui, ils sont faciles à écrire, mais je ne suis pas d'accord avec votre point de vue sur la nécessité de changer le code à plusieurs endroits, si vous structurez bien votre code, vous ne devriez pas avoir besoin de le faire.

Cela semble suspect car il n'y a aucune fonction apparente qui est renvoyée!

C'est une fonction anonyme qui a été attachée à l'événement de clic de l'objet.

pourquoi fais-tu ça, Steve?

Pourquoi diable êtes-vous doi ..... Ah tant pis, comme vous l'avez mentionné, c'est vraiment une mauvaise pratique largement adoptée :)

Essayez ceci dans la console:

var div = document.createElement('div');

div.setAttribute('onclick', 'alert(event)');

div.onclick

Dans Chrome, cela montre ceci:

function onclick(event) {
  alert(event)
}

... et la namepropriété non standard de div.onclickis "onclick".

Donc, que ce soit ou non anonyme dépend de votre définition de «anonyme». Comparez avec quelque chose comme var foo = new Function(), où foo.nameest une chaîne vide, et foo.toString()produira quelque chose comme

function anonymous() {

}