- ベストアンサー
addEventListenerについて
addEventListenerメソッドについてgoogleで検索してみていろいろと読んでみましたがいまいち理解できません。 ブラウザ上でのイベントとjavascriptの関数を結びつけるのが役割かなとはなんとなく分かりましたが、このメソッドの第３引数のtrue,falseが、キャプチャのオンかオフらしいのですが、キャプチャなるものが理解できません。 教えて下さい。よろしくお願いします。
- kililikanrai
- お礼率91% (263/289)
- JavaScript
- 回答数2
- ありがとう数7
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
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>
その他の回答 (1)
- const
- ベストアンサー率66% (12/18)
> このaddEventListenerメソッドですが一体どういう場面で使うのでしょうか？ スクリプトとマークアップ（HTML）を分離するために使うのが本来の用途だと思います。（W3Cあたりの仕様書を読めば書いてあるかもしれません） 各ブラウザの対応状況からなかなか思うようにいかない感じですが。
お礼
何度もありがとうございます!
お礼
なるほど、理解できました。わざわざサンプルスクリプトまで提示していただき感謝の極みです。ありがとうございます! すみません。失礼でなければもうひとつ聞かせてください! このaddEventListenerメソッドですが一体どういう場面で使うのでしょうか？