質問: Javascriptで構築しているサイトで どうしても原因がわからない事象があり質問させていただきます。 ブラウザにテーブルデータを一覧表示し、 プルダウン選択で値を変更すると、 live関数を起動しデータ更新処理を実行する 仕組みなのですが、プルダウンの操作を早く行うとlive関数が 起動せずにデータ更新が漏れてしまいます。 ゆっくり操作すると問題無く起動します。 また、この事象はブラウザによって動作が異なり、 FireFox、IEで発生するのですが、Chromeでは発生しません。 事象がランダムに発生するので原因がわかりません。 何か考えられる理由はあるでしょうか? もしわかる方いましたらご教示ください。 環境 ・jquery-1.6.2 ・WEBサーバ:Apache ・DB:MySQL
回答: 仮定 == 回答としてはエスパーですが、想像力たくましく質問文を解釈してみました。 * ページ表示直後に 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); ``` ``` (...膨大なコンテンツ...) A B C D 1 2 3 4 (...膨大なコンテンツ...) ``` 解説 == 前述のコードは DOMContentLoaded まで実行を待ちます。 従って、DOMContentLoaded が発火するまでは JavaScript の機能が使えず、Webページを表示直後にselect要素の選択操作を行った場合に console.log への出力機能が働かない可能性があります。 JavaScript による DOM 参照は DOM が構築されてから働くものなので、DOM 構築は先出しする必要があります。 その為、「静的HTML + JavaScript」では表示直後の操作に完全な対応が出来ないのが実情です。 対策 == 対策は大別して2つあります。 * JavaScript の機能が適用されるまで操作不可能にする * JavaScriptで要素ノードを生成する 前者は該当要素に **disabled属性** を付与する事で操作不可能な状況を作り出します。 後者は `createElement` 等のAPIでノードを動的に生成し、イベント定義してからノードを挿入する事で表示直後の操作に対応させます。 Re: @hosayu