web-dev-qa-db-ja.com

インライン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要素に特に関連するコードを要素内で右に定義するのは非常に簡単であり、場合によっては理にかなっています。後でこれはひどい、ひどいアイデアだったので、div全体（または何でも）を消すことができ、ページの残りの部分に謎のJSとCSSの塊がぶらぶらしていないので、レンダリングが少し遅くなります。これは、参照の局所性の概念に似ていますが、キャッシュミスではなく、バグとコードの膨張を調べています。

javascripthtmlhtml5
117
Steven Lu

あなたはそれをほぼ正しく持っています、しかしあなたはインラインコードに供給された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>
85
apsillers

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

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

"onclick"の実際の値を次のように効果的に設定することです。

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

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

8
Pointy

Event Handler Attributesに関しては、たくさんの悪い習慣が投げかけられているようです。悪い習慣はそれが最も適切であるところで利用可能な機能を知りそして使用していません。イベント属性は完全にW3C文書化された標準であり、それらについて悪い習慣はありません。インラインスタイルを配置するのも変わりありません。これはW3Cドキュメントでもあり、時には役に立ちます。あなたがそれをスクリプトタグで包むかどうかにかかわらず、それは同じように解釈されるつもりです。

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

6
Daniel B

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

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

Jsで

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

consoleに見られるように、あなたがchromeを使っているなら、それは渡されたイベントオブジェクトで無名関数を出力します、それはそれがIEで少し異なりますが。

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

インラインイベントハンドラに関するあなたの意見の一部に同意します。はい、それらは書くのが簡単です、しかし、私はあなたがあなたのコードをうまく構造化するならば、あなたがこれをする必要がないならば、複数の場所でコードを変える必要があるというあなたの意見に同意しません。

4
aziz punjani

から戻ってきている明らかな関数がないので、それは疑わしく見えます！

これは、オブジェクトのclickイベントに添付されている無名関数です。

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

一体なぜあなたはdoiです.....あなたが言ったように、ああ決して気にしないでください、それは本当に広く採用されている悪い習慣です:)

3
mattytommo

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

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

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

div.onclick

Chromeでは、これはこれを示しています。

function onclick(event) {
  alert(event)
}

...そしてdiv.onclickの非標準のnameプロパティは"onclick"です。

したがって、これが匿名であるかどうかは、「匿名」の定義によって異なります。 var foo = new Function()のようなものと比較してください。ここでfoo.nameは空の文字列で、foo.toString()は以下のようなものを生成します。

function anonymous() {

}
3
Dagg Nabbit