136

私はこれが悪い習慣であることを知っています。可能な限り、このようなコードを書かないでください。

もちろん、インライン 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 要素に特に関連するコードを要素内で定義する方がはるかに簡単で、場合によっては理にかなっている場合もあります。 ）そして、ページの残りの部分にぶら下がっている不可解なJSとCSSのクラフトの束がなく、レンダリングがわずかに遅くなります. これは参照の局所性の概念に似ていますが、キャッシュ ミスの代わりに、バグやコードの肥大化に注目しています。

4

7 に答える 7

101

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>
于 2012-05-15T20:04:01.133 に答える
9

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

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

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

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

つまり、「イベント」パラメーターを期待する関数を作成します。(ええと、IE はそうではありません。単純で単純な無名関数に似ています。)

于 2012-05-15T19:59:55.987 に答える
6

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

<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')
}

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

于 2012-05-15T20:19:44.397 に答える
3

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

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.nameは空の文字列であり、foo.toString()次のようなものが生成されます

function anonymous() {

}
于 2012-05-15T20:23:49.507 に答える
3

返されている明らかな関数がないため、疑わしいように見えます!

オブジェクトのクリックイベントに付けられた無名関数です。

スティーブ、どうしてこんなことをしているの？

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

于 2012-05-15T19:57:41.247 に答える
0

JavaScriptを使用:

ここで入力要素が使用されます

<input type="text" id="fname" onkeyup="javascript:console.log(window.event.key)">

複数行のコードを使用する場合は、 javascriptの後に中括弧を使用します。

<input type="text" id="fname" onkeyup="javascript:{ console.log(window.event.key); alert('hello'); }">
于 2021-02-11T11:00:54.253 に答える