[解決済み] インライン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! --> 

というのが動作します。しかし、これがどの程度のハックなのかはわかりません。なぜなら、明らかに返される関数がないからです。

なぜこんなことをするのかと聞かれるかもしれませんね、Steve。インラインJSは悪い習慣だ!

正直に言うと、私はページの 1 つのセクションを修正するために 3 つの異なるセクションのコードを編集することに疲れています。この HTML 要素に特に関連するコードを定義する方がはるかに簡単で、時には理にかなっています。 の右側に 要素の中で定義することは、とても簡単で、時には理にかなっています。2 分後にこれはひどい、ひどい考えだと思ったときには、div (またはその他) 全体を削除すれば、ページの残りの部分に謎の JS や CSS の残骸がたむろして、レンダリング速度がわずかに低下するようなことはありません。これは参照の局所性という概念に似ていますが、キャッシュミスの代わりに、バグとコードの肥大化に注目しています。

どのように解決するのですか?

ほぼ正しいのですが、"C "の部分を考慮していません。 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>