私はコンテンツの編集可能なdivを扱っています。文字がdivに追加される前と後の両方でキーストロークをキャプチャする必要があります。イベントキャプチャとcontentEditable divのバブリング
キャプチャとバブリングについての私の理解は、イベントがドムツリーの最高レベルで最初にキャプチャされ、次にそれを渡します。バブリングでは、最も低いレベルで開始し、ツリーをバブルアップします。
キャプチャフェーズでイベントリスナーを追加した場合、編集可能なdivのコンテンツにはのテキストが反映され、のキーストロークが送信されていたと考えました。バブリング段階でイベントリスナーを追加すると、divのテキストコンテンツには、今入力した文字が含まれます。
イベントのリスナーがキャプチャまたはバブリングフェーズで追加されても、divのコンテンツには直前に入力された文字は含まれません。ここで
はそれを試してみるために、簡単なテストケースである:
<div id="captureTest" contentEditable='true' style='height: 30px; width: 400px; border-style:solid; border-width:1px'></div>
<script type="text/javascript">
var div = document.getElementById('captureTest');
div.addEventListener("keydown", function() {alert('capture: ' + this.innerHTML)}, true);
div.addEventListener("keydown", function() {alert('bubble: ' + this.innerHTML)}, false);
</script>
私は2番目の関数の出力が文字を入力した後のdivの新しいテキストを含めることを期待するが、これはしていないようですケース。
私の質問は:コンテンツ編集可能なdivからキーストロークイベントをキャプチャしてコンテンツが得られるかどうかキーが入力された後ですか?私は先読み機能を実装するためにこれが必要です。
私はイベントを停止してからexecuteCommand( 'insertHTML')を使用することができますが、これは削除、バックスペース、ペースト、およびその他のタイプの挿入を処理する際に分解されます。
Firefox 3でこれをテストしています。IEにはaddEventListenerメソッドがありません。
ありがとうございました!