Comment fonctionne le Javascript en ligne (en HTML)?

Question

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

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

Je suis à la poursuite de cette requête dans l'intérêt de bien comprendre ce qui se passe (et les pièges potentiels), quand quelque chose comme ce qui est écrit:

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

Aussi loin que je peux dire c'est fonctionnellement identique à

<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 onclick est inséré à l'intérieur d'une fonction anonyme qui est attribué à l'élément du gestionnaire de clic. Est-ce effectivement 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! --> 

Qui fonctionne. Mais je ne sais pas combien de un hack c'est. Il a l'air suspect, car il n'y a apparemment pas de fonction qui est retourné à partir de!

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

Eh bien, pour être tout à fait honnête, je suis fatigué de l'édition de trois différentes sections de code pour modifier une section d'une page, surtout quand je suis juste de prototypage quelque chose pour voir si elle va travailler à tous. Il est tellement plus facile et parfois même sens pour le code spécifiquement liés à cet élément HTML à être défini droit à l'intérieur de l'élément: Lorsque je décide de 2 minutes plus tard, ce fut une terrible, terrible idée que je peux nuke l'ensemble de la div (ou autre) et je n'ai pas un tas de mystérieux JS et CSS trucs traîner dans le reste de la page, ce qui ralentit le rendu très légèrement. Ceci est similaire à la notion de la localité de référence, mais au lieu de cache nous sommes à la recherche à des bugs de code et de ballonnement.

Answer 1

Vous l'avez presque correct, mais vous n'avez pas comptabilisés pour l' this de la valeur fournie pour le code en ligne.

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

est en fait plus proche:

<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>

Inline gestionnaires d'événements set this égal à la cible de l'événement.

Answer 2

Ce que le navigateur ne quand vous avez

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

consiste à définir la valeur réelle de "onclick" à quelque chose comme efficacement:

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

C'est, il crée une fonction qui attend un "événement" de paramètre. (Eh bien, IE n'est pas; c'est plus comme une plaine simple fonction anonyme.)

Answer 3

La meilleure façon de répondre à votre question, c'est à 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 l' console, si vous utilisez google chrome, imprime une fonction anonyme à l'objet de l'événement passé, même si c'est un peu différent dans IE.

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

Je suis d'accord avec certains de vos points sur inline gestionnaires d'événements. Oui, ils sont faciles à écrire, mais je ne suis pas d'accord avec votre point de vue sur le fait d'avoir à modifier le code dans plusieurs places, si la structure de votre code bien, vous ne devriez pas besoin de le faire.

Answer 4

Essayez ceci dans la console:

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

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

div.onclick

Dans google Chrome, il montre ceci:

function onclick(event) {
  alert(event)
}

...et de la non-standard name de la propriété de l' div.onclick est "onclick".

Donc, si oui ou non c'est anonyme dépend de votre définition de "anonyme". Comparer avec quelque chose comme var foo = new Function()où foo.name est une chaîne vide, et foo.toString() va produire quelque chose comme

function anonymous() {

}

Answer 5

Il a l'air suspect, car il n'y a apparemment pas de fonction qui est retourné à partir de!

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

pourquoi faites-vous cela, Steve?

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