addEventListenerについて

解決済

質問者：kililikanrai
質問日時：2005/02/12 09:55
回答数：2件

addEventListenerメソッドについてgoogleで検索してみていろいろと読んでみましたがいまいち理解できません。

ブラウザ上でのイベントとjavascriptの関数を結びつけるのが役割かなとはなんとなく分かりましたが、このメソッドの第３引数のtrue,falseが、キャプチャのオンかオフらしいのですが、キャプチャなるものが理解できません。
教えて下さい。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： const
回答日時：2005/02/13 14:16

useCaptureが真のリスナー → イベントの対象 → useCaptureが偽のリスナーの順序でイベントが伝播されます。

下の例で、適当にキーを押して試してみるとわかるかと思います。

<html><head><title>Test</title>
<script type="text/javascript">
function KeyPressC(e) {
document.getElementById('log').value += "Capture\n";
if (document.getElementById('cancel').checked) e.cancelBubble = true;
}
function KeyPressC2(e) { document.getElementById('log').value += "Capture(2)\n"; }
function KeyPress() { document.getElementById('log').value += "InputText\n"; }
function KeyPressNC(e) { document.getElementById('log').value += "NoCapture\n"; }
function KeyPressNC2(e) { document.getElementById('log').value += "NoCapture(2)\n"; }
document.addEventListener('keypress', KeyPressNC, false);
document.addEventListener('keypress', KeyPressC, true);
document.addEventListener('keypress', KeyPressNC2, false);
document.addEventListener('keypress', KeyPressC2, true);
</script></head><body>
<form method="get" action="">
<input type="text" onkeypress="KeyPress()">
<input type="button" value="クリア" onclick="document.getElementById('log').value=''"><br>
<textarea id="log" rows="10" cols="70" readonly></textarea><br>
<input type="checkbox" id="cancel">cancelBubble
</form></body></html>