5

この質問は非常に基本的なものであり、似たようなものを探していたとしても、何かの複製であるに違いないと確信しています。

私の質問は基本的に：HTML要素のイベントハンドラーを最初に登録するのに最適な場所はどこですか？

イベントハンドラーを登録する最も簡単な方法は、明らかにインラインで行うことです。

<div id = "mybutton" onclick = "doSomething()">Click me</div>

しかし、これは、現代のWeb開発におけるロジックとコンテンツの分離に向けた圧倒的な行進に反しています。したがって、2012年には、すべてのロジック/動作は純粋なJavascriptコードで実行されることになっています。それは素晴らしいことであり、より保守しやすいコードにつながります。ただし、HTML要素をJavascriptコードに接続する初期フックが必要です。

通常、私は次のようなことをします。

<body onload = "registerAllEventHandlers()">

しかし...それはまだ「不正行為」ですよね-ここではまだインラインJavascriptを使用しているからです。しかし、他にどのようなオプションがありますか？ページがまだロードされていないため、その時点ではDOMにアクセスできないため<script>、セクションのタグでそれを行うことはできません。<head>

<head>
<script type = "text/javascript">
    var myButton = document.getElementById("mybutton"); // myButton is null!
</script>
</head>

ページの下部<script>などにタグを付けますか？好き：

<html>
<body>
...
...
<script type = "text/javascript">
   registerAllEventHandlers();
</script>
</body>
</html>

ここでのベストプラクティスは何ですか？

4

4 に答える 4

2

あなたが使用することができますwindow.onload：

<script type = "text/javascript">
  window.onload = registerAllEventHandlers;
</script>

を使用する場合：

$(registerAllEventHandlers);

使用onloadは、イベントをすぐに登録onloadしますが、DOMの準備ができたときに起動するため機能します。

于 2012-05-27T14:23:03.090 に答える
0

私はこれに対して同様の答えを持っていましたが、一般的にJavaScriptについてでした。しかし、考え方は同じです。本文を閉じる前にスクリプトをロードしてください。

window.onloadおよびDOMreadyイベントを抽象化するライブラリを利用します。そうすれば、DOMの準備ができたらすぐにスクリプトをロードできます。

于 2012-05-27T14:23:19.400 に答える
0

You should register your event handlers as soon as the DOM is ready. Detecting this across all browsers hasn't always been easy, although with the notable exception of IE 8 (and earlier) most widely used browsers now support the DOMContentLoaded event (thanks to gengkev for pointing that out in the comments).

This is essentially equivalent to calling your registerAllEventHandlers function at the end of your body, but it has the advantage that you don't need to add any JavaScript to your HTML.

It is significantly better than using window.onload because that isn't executed until all of the page's assets (images, CSS etc.) have loaded.

If you're using one of the major JavaScript frameworks, then you can very easily detect when the DOM is ready, even in older versions of IE. With jQuery you would use the ready event:

jQuery(document).ready(function () {
    // Your initialisation code here
});

Or the shorthand:

jQuery(function() { … });

With Prototype you would use the dom:loaded event:

document.observe("dom:loaded", function() {
    // Your initialisation code here
});
于 2012-05-27T14:27:23.797 に答える
0

個人的には、onlclick="doSomething();"要素の追加に問題はありません。ロジックはなく、関数呼び出しだけです。

すべてのロジックは、あるべき場所にありHEADます。または別のファイルで定義された関数内です。

Aタグを追加したとき、href="somepage.html"または追加したときの違いを教えてください。href="somepage.html#someanchor"

于 2012-05-27T15:24:41.680 に答える