1

控えめなJavaScriptを学ぶために最善を尽くしています。以下のコードは、HTMLタグ内から呼び出されたgetArrays関数を使用して持っていた既存の練習部分を変更する試みです。これは私が仕事をすることができた唯一のバージョンです。それが機能するのは良いことですが、不要な部分がいくつかある可能性があり、そこにコードの最後の行が必要な理由を完全に理解していないようです（addEventListenerのものには新しいものです）。私はMozillaDOMリファレンスの例を使って作業していて、jQueryでこれを行う方法をすでに知っています。ありがとう！

JavaScript：

        <script>

        function getArrays() {
            var ddlValArray = new Array();
            var ddlTextArray = new Array();
            var ddl = document.getElementById("ddlFlavors");

            for (i=0; i<ddl.options.length; i++) {
                ddlValArray[i] = ddl.options[i].value;
                ddlTextArray[i] = ddl.options[i].text;
                alert(ddlValArray[i] + ' ' + ddlTextArray[i]);  
            }
        }

        function showArrays() {
            var link = document.getElementById("clickHandler");
            link.addEventListener("click", getArrays, false);   
        }

        document.addEventListener("DOMContentLoaded", showArrays, false);


    </script>

HTML

Select Flavor: 
<select id='ddlFlavors'>
<option value="1">Vanilla</option>
<option value="2">Chocolate</option>
<option value="3">Strawberry</option>
<option value="4">Neopolitan</option>
</select>

<br/><br/>
<a id="clickHandler" href="#">Show Flavors</a>
4

3 に答える 3

5

HTML/JSを正しく構造化した場合はそうではありません。

スクリプトタグをタグの直前の本文の下部に移動すると</body>、DOMContentLoadedイベントを待つ必要がなくなります。その上のhtmlは、JSが実行される前に解析されます。

これは他の警告を引き起こす可能性がありますが、あなたの例ではうまくいきます。

<body>
Select Flavor:
<select id='ddlFlavors'>
    <option value="1">Vanilla</option>
    <option value="2">Chocolate</option>
    <option value="3">Strawberry</option>
    <option value="4">Neopolitan</option>
</select>
<br/><br/>
<a id="clickHandler" href="#">Show Flavors</a>
<script>
        function getArrays() {
            var ddlValArray = new Array();
            var ddlTextArray = new Array();
            var ddl = document.getElementById("ddlFlavors");
            for (i=0; i<ddl.options.length; i++) {
                ddlValArray[i] = ddl.options[i].value;
                ddlTextArray[i] = ddl.options[i].text;
                alert(ddlValArray[i] + ' ' + ddlTextArray[i]);  
            }
        }
        function showArrays() {
            var link = document.getElementById("clickHandler");
            link.addEventListener("click", getArrays, false);   
        }
        showArrays();
    </script>
</body>

スクリプトを下部に配置することには、他にも多くの利点があります。詳細については、こちらをご覧ください。

注意点：iframeと画像のタグは解析されますが、画像自体のダウンロードが完了していない可能性があるため、それを待つ必要があります。また、iframeコンテンツもまだ読み込まれていない可能性があります。ただし、DOMContentLoadedはこれらも待機しません。注意しておくといいと思いました。

于 2012-12-20T20:28:35.260 に答える
2

このコード行は、DOMの準備が整う前にdocument.addEventListener("DOMContentLoaded", showArrays, false);関数showArrays()の実行が開始されないようにします。つまり、関数showArrays()は（X）HTMLドキュメントがロードされ、解析された後に実行を開始します。

JavaScriptコードを別のファイルに入れて、headセクションで次のHTMLコードを使用することをお勧めします<script type="text/javascript" src="yourfilepath.js"></script>。次に、メソッドの代わりwindow.onloadにonclickイベントを使用することもできます。document.addEventListener()

これを行うと、関数の本体の外側にある関数内にコードを配置し、showArrays関数を削除できます。

例えば：

window.onload = function()
{
  var link = document.getElementById("clickHandler");
  link.onclick = getArrays;
}

それははるかに良い習慣と考えられています。

完全な例

ファイルscript.js内：

//This is the beginning of the script...

    function getArrays() {
        var ddlValArray = new Array();
        var ddlTextArray = new Array();
        var ddl = document.getElementById("ddlFlavors");

        for (i=0; i<ddl.options.length; i++) {
            ddlValArray[i] = ddl.options[i].value;
            ddlTextArray[i] = ddl.options[i].text;
            alert(ddlValArray[i] + ' ' + ddlTextArray[i]);  
        }
    }

window.onload = function()
{
  var link = document.getElementById("clickHandler");
  link.onclick = getArrays;
}

HTMLヘッドの内部：

<script type="text/javascript" src="script.js"></script>

ほとんどの場合、CSSと同様に、JavaScriptをHTMLファイルとは別に記述することをお勧めします。そうすることで、HTMLコードをより整理された状態に見せることができます。

于 2012-12-20T20:21:05.727 に答える
2

イベントリスナーはJSにとって非常に重要です。ユーザーがページを操作するたびに、そのイベントをピックアップして応答する必要があります。
もちろん、このスニペットでは、関数は、DOMに指定されたIDを持つ要素があり、ready、set、およびwaitingであると想定しています。これは当てはまらない可能性があるため、JSがOK（DOMReadyイベント）を受信するまで待つ必要があります。

これは、を使用する理由の1つの非常に単純な例ですaddEventListener。しかし、IMO、イベントリスナーは、Ajax呼び出しを使用してページに新しいコンテンツを追加し始めると、実際に独自のものになります
。DOMの準備ができていると仮定しますが、一部の要素は後で要求される場合とされない場合があります（ユーザー入力）。jQueryでは、次のようなものを使用します。

$('#foo').on('click',functionRef);

これには、このコードの実行時にfoo要素が使用可能である必要はありませんが、要素がdomに追加されるとすぐに、クリックイベントが必要に応じて処理されます。
jQ以外ではaddEventListener、そのために使用します。イベントモデル（伝播とバブリングの詳細についてはquirksmodeを参照）のため、リスナーを要素に直接接続する必要はありません。

document.body.addEventListener('click',function(e)
{
    if ((e.target || e.srcElemet).id === 'foo')
    {
        //function that deals with clicks on foo element
    }
},false);//last param is for bubbling/propagating events

このようにして、各ajax呼び出しの各応答をチェックすることなく、非同期でdomに追加される可能性のある要素のすべてのイベントをバインドできます...

さらに一歩進んでみましょう：委任。ご覧のとおり、上のスニペットでは、ボディ内のどこかで発生するすべてのクリックイベントをリッスンしています。これはほとんど違いがありません。すべてのクリックであるため、101個の要素に対して101個の個別のクリックリスナーを追加する必要はありません。1つだけです。あなたがする必要がある唯一のことは、それに応じて各要素を処理するような方法でハンドラーを書くことです：

document.body.addEventListener('click',function(e)
{
    e = e || window.event;
    var elem = e.target || e.srcElement;
    switch (true)
    {
        case elem.id === 'foo':
            //either code here or:
            return fooCallback.apply(elem,[e]);//use another function as though it were the handler
        case elem.id.className.match(/\bsomeClass\b/):
            return someClassCallback.apply(elem,[e]);//~= jQuery's $('.someClass').on('click',function);
         case elem.type === 'text':
             //and so on
    }
},false);

かなり強力なもの。もちろん、それだけではありません。欠点もあります（主にXブラウザーのもの）が、主な利点は次のとおりです。

  1. 動的に追加/削除される要素のイベントの処理
  2. すべての要素のすべてのイベントを処理する単一のイベントリスナーにより、コードがより効率的になり、パフォーマンスが大幅に向上する場合があります。これは、委任が適切である場合の良い例です。悲しいことに、Xブラウザの開発がパーティーにもたらす苦痛も示しています...
于 2012-12-20T20:39:49.300 に答える