ベストアンサー

addEventListenerについて

2005/02/12 09:55

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

kililikanrai
お礼率91% (263/289)

JavaScript
回答数2
ありがとう数7

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

const
ベストアンサー率66% (12/18)

2005/02/13 14:16 回答No.1

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>

質問者