インラインJavaScript（HTML）はどのように機能しますか？

これは悪い習慣だと知っています。可能な限り、このようなコードは記述しないでください。

もちろん、インラインJavascriptの巧妙なスニペットで問題にすばやく対処できる状況では、常に自分自身を見つけます。

次のようなものが書かれたときに何が起こるか（そして潜在的な落とし穴）を完全に理解するために、このクエリを追求しています。

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

私が知る限り、これは機能的には同じです

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

これから推定すると、属性に割り当てられた文字列onclickは、要素のクリックハンドラーに割り当てられた無名関数内に挿入されているようです。これは本当ですか？

私はこのようなことを始めているので：

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

うまくいきました。しかし、これがどれだけのハックなのかはわかりません。から返されている明らかな関数がないため、疑わしく見えます！

あなたは尋ねるかもしれません、なぜあなたはこれをしているのですか、スティーブ？インラインJSは悪い習慣です！

正直なところ、ページの1つのセクションを変更するためだけにコードの3つの異なるセクションを編集するのにうんざりしています。特に、プロトタイプを作成して、それがまったく機能するかどうかを確認する場合は特にそうです。これは非常に簡単で、このHTML要素に特に関連するコードを要素内で定義することも理にかなっています。2分後にこれがひどい、ひどい考えだと判断したとき、div全体（または何でも） ）そして、私はページの残りの部分にぶら下がっている不思議なJSとCSSの束がたくさんないので、レンダリングが少し遅くなります。これは参照の局所性の概念に似ていますが、キャッシュミスではなく、バグとコードの膨張を調べています。

ほぼ正しいですがthis、インラインコードに提供された値を考慮していません。

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

実際に近いです：

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

インラインイベントハンドラーthisは、イベントのターゲットに等しく設定されます。インラインスクリプトで無名関数を使用することもできます

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

あなたが持っているときにブラウザは何をしますか

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

「onclick」の実際の値を効果的に次のようなものに設定することです：

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

つまり、「イベント」パラメータを必要とする関数を作成します。（まあ、IEはそうではありません。それは、単なる単純な匿名関数のようなものです。）

イベントハンドラー属性については、多くの悪い習慣が投げかけられているようです。悪い習慣とは、最も適切な場所で利用可能な機能を知り、使用することではありません。イベント属性は完全にW3Cで文書化された標準であり、それらについて悪い習慣はありません。これはインラインスタイルを配置することと同じです。インラインスタイルもW3Cで文書化されており、時々役立ちます。スクリプトタグで囲むかどうかに関係なく、同じように解釈されます。

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

あなたの質問に答える最良の方法は、実際にそれを見ることです。

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

jsで

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

を見るとわかるように、consoleChromeを使用している場合は、IEとは少し異なりますが、渡されたイベントオブジェクトを使用して無名関数が出力されます。

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

インラインイベントハンドラに関するいくつかの点に同意します。はい、それらは簡単に書くことができますが、複数の場所でコードを変更する必要があるというあなたの意見に同意しません。コードを適切に構成している場合、これを行う必要はありません。

から返されている明らかな関数がないため、疑わしく見えます！

これは、オブジェクトのクリックイベントに関連付けられている匿名関数です。

なぜあなたはこれをしているのですか、スティーブ？

どうしてあなたはドイなのですか.....気にしないでください、あなたが言ったように、それは本当に広く採用されている悪い習慣です:)

コンソールでこれを試してください：

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

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

div.onclick

Chromeでは、次のように表示されます。

function onclick(event) {
  alert(event)
}

...の非標準nameプロパティdiv.onclickは"onclick"。

したがって、これが匿名かどうかは、「匿名」の定義に依存します。空文字列var foo = new Function()であるのようなものと比較すると、次のようなものが生成されますfoo.namefoo.toString()

function anonymous() {

}