Javascriptで構築しているサイトで  
どうしても原因がわからない事象があり質問させていただきます。

ブラウザにテーブルデータを一覧表示し、  
プルダウン選択で値を変更すると、  
live関数を起動しデータ更新処理を実行する  
仕組みなのですが、プルダウンの操作を早く行うとlive関数が  
起動せずにデータ更新が漏れてしまいます。  
ゆっくり操作すると問題無く起動します。  
また、この事象はブラウザによって動作が異なり、  
FireFox、IEで発生するのですが、Chromeでは発生しません。

事象がランダムに発生するので原因がわかりません。  
何か考えられる理由はあるでしょうか？  
もしわかる方いましたらご教示ください。

環境  
・jquery-1.6.2  
・WEBサーバ：Apache  
・DB：MySQL
CC BY-SA 3.0
2017-08-19T08:21:28.453
37335
2017-10-05T00:37:25.637
24949
question
javascript
ブラウザで操作を早く行うとJavascriptの関数が起動しない
# 仮定

回答としてはエスパーですが、想像力たくましく質問文を解釈してみました。

  * ページ表示直後に JavaScript の機能が適用されているプルダウンメニューを操作しても、JavaScript の機能が働かない。

# コード

```

    'use strict';
    document.addEventListener('DOMContentLoaded', function (event) {
      event.target.querySelectorAll('#sample select').forEach(function (select) {
        select.addEventListener('change', function (event) {
          console.log(event.target.value);
        }, false);
      });
    }, false);
```

```

    <p>(...膨大なコンテンツ...)</p>
    
    <form id="sample">
      <p>
        <select name="alphabet">
          <option>A</option>
          <option>B</option>
          <option>C</option>
          <option>D</option>
        </select>
      </p>
      <p>
        <select name="number">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </p>
    </form>
    
    <p>(...膨大なコンテンツ...)</p>
```

# 解説

前述のコードは DOMContentLoaded まで実行を待ちます。  
従って、DOMContentLoaded が発火するまでは JavaScript
の機能が使えず、Webページを表示直後にselect要素の選択操作を行った場合に console.log への出力機能が働かない可能性があります。  
JavaScript による DOM 参照は DOM が構築されてから働くものなので、DOM 構築は先出しする必要があります。  
その為、「静的HTML + JavaScript」では表示直後の操作に完全な対応が出来ないのが実情です。

# 対策

対策は大別して2つあります。

  * JavaScript の機能が適用されるまで操作不可能にする
  * JavaScriptで要素ノードを生成する

前者は該当要素に **disabled属性** を付与する事で操作不可能な状況を作り出します。  
後者は `createElement` 等のAPIでノードを動的に生成し、イベント定義してからノードを挿入する事で表示直後の操作に対応させます。

Re: @hosayu
CC BY-SA 3.0
2017-08-21T17:14:47.833
37385
2017-08-21T17:14:47.833
20262
37335
answer