学習者として、私はたくさんのソースコードを見るのが好きです。約1年前にJavaScriptを学び始めてから、onclick="doSomething()"のような伝統的なイベントハンドラを使用していない人々の傾向に気づきましたが、document.getElementById("someId").onclick = function(){..some code..};今日、なぜイベントハンドラを割り当てるためにスクリプトを使用する人が増えていますか、html要素内からイベントを割り当てる人が増えていますか？
このような傾向の背景は何ですか？
Javascriptでハンドラを割り当てると、すべてのコードがHTML全体に分散するのではなく、1か所に配置されます。
これは、CSSがコンテンツとスタイルを区別するのと同じように、スクリプトからコンテンツを分離するのに役立ちます。
ブラウザは、ハンドラ属性ごとにJavascriptパーサーを起動する必要がないので、高速です。
これはUnobtrusive Javascriptの例です。
HTMLは、マークアップのみの純粋なコンテンツである必要があります。
デザインはCSSスタイルシートにする必要があります。
動的スクリプトはJavaScriptコードである必要があります。別ファイルが適切です。
ちょっと気分が良くなりました。私は、HTML全体に広がっているのではなく、すべてのスクリプトが1つの場所にあるときに、より効率的で、より効率的であると言えます。 :)
実際には邪魔されないJavaScriptが効率的です。 – jwueller
@elusiveありがとう、常に学ぶのは良い。 :-) –
私はほとんどの人がjQueryを使用していると思います。 $("#someId").click(function(){})と、多くの要素にイベントをアタッチする場合は、jQueryを使用すると簡単になり、関数を1か所に配置できます。
** '＃' ** – SLaks
+1。 javascriptを独立した状態に保つ理由はたくさんありますが、その理由は新しいものではありません。昨年のこの変化を観察するOPの説明の多くはjQueryによるものです。 –
他の答えはそう、これに触れていない。
document.getElemenbyId("someId").onclick = function(){..some code..};
...私のためにミス：
あなたの例でも、JavaScriptコード内（反映）onclick属性を使用しています属性を使用せずにこれを行う主な理由の1つ：他人とうまく遊ぶ。ハンドラ取り付けるDOM2道（IE上addEventListener、またはattachEventは[IE9は最終的に標準addEventListenerを持っている]）：
document.getElementById("someId").addEventListener("click", function() { ... }, false);
// or
document.getElementById("someId").attachEvent("onclick", function() { ... });
... 1件のハンドラがで結合することができるよりも非排他的 —以上であります同時。一方、onclickに割り当てると、前のハンドラを起動して引き継ぎます。
私にとっては、この「うまくやっている」ことは大きな売りです。さて、コードとマークアップを別々にしておきますが、これは他の回答でもよくカバーされています。
+1 - 非常に興味深い。これを知らなかった！ –
他の回答で言及されているように、主な理由は懸念（この場合、コンテンツとコンテンツを別々にする）の分離です。これは完全に賢明です。しかし、それは常に唯一の考慮事項ではありません。私は以前にlengthy answer to a related questionと書いています。
_ _初心者のWeb開発者と経験豊富な専門家を分ける部分です。_ _ –
SLaks
@SLaksさらに、アーキテクチャの観点からは、ビヘイビアー（JavaScript）とプレゼンテーション（HTML/CSS）を分離するのが理にかなっています。私はこれが「目立たないJavaScript」の定義の一部であることは承知していますが、言及することが重要です。 –
@Andrew：私はすでにそれを言っていませんでしたか？ – SLaks