• ベストアンサー

addEventListenerについて

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

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

  • ベストアンサー
  • const
  • ベストアンサー率66% (12/18)
回答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>

kililikanrai
質問者

お礼

なるほど、理解できました。わざわざサンプルスクリプトまで提示していただき感謝の極みです。ありがとうございます! すみません。失礼でなければもうひとつ聞かせてください! このaddEventListenerメソッドですが一体どういう場面で使うのでしょうか?

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • const
  • ベストアンサー率66% (12/18)
回答No.2

> このaddEventListenerメソッドですが一体どういう場面で使うのでしょうか? スクリプトとマークアップ(HTML)を分離するために使うのが本来の用途だと思います。(W3Cあたりの仕様書を読めば書いてあるかもしれません) 各ブラウザの対応状況からなかなか思うようにいかない感じですが。

kililikanrai
質問者

お礼

何度もありがとうございます!

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • addEventListener の第三引数の意味

    addEventListener の第三引数の意味を教えてください。 MDNでは element.addEventListener - MDN https://developer.mozilla.org/ja/DOM/element.addEventListener 「true の場合、useCapture は、ユーザがキャプチャを開始したいことを示しています」 と書いてあり何のことやらさっぱり分かりませんでした。 一応下記のサイトを見て表面的な動きは理解しました。 addEventListener の第三引数について - hogehoge @teramako http://d.hatena.ne.jp/teramako/20070126/about_useCapture_of_addEventListener 以下の順で処理される。 1 親のtrue 2 子のtrue 3 子のfalse 4 親のfalse それは分かったのですが、どういうときに使い分けるのかということが結局分かりませんでした。おそらくはほとんどの場合でどちらでもいい・意識する必要が無いのではないかと思いますが、しかし一応きちんと理解しておきたいと思っています。 ◎addEventListener の第三引数の意味 ◎addEventListener の第三引数を ・trueにした方がいいケース ・falseにした方がいいケース このあたりを教えてください。 よろしくお願いします。

  • addEventListenerで

    window.addEventListener("load", addEvents, false); function addEvents() {  for (var i = 0; i < 3; i++) {   document.getElementById("hoge" + i).addEventListener("click", function() { check(i) }, false);  } } ---- というコードで、イベントを追加したのですが hoge0をクリック -> check(3)を呼び出し hoge1をクリック -> check(3)を呼び出し hoge2をクリック -> check(3)を呼び出し となってしまいます。つまり、引数にループの最後の数字+1が渡されてしまいます。 どうしたらよいのでしょうか?

  • 【javascript 】addEventListenerでもattachEventでもないブラウザ

    http://www.dustindiaz.com/top-ten-javascript/ 上記に記載されている、addEvent()について教えてください。 以下は抜粋です。(行頭は全角スペースです。) function addEvent(elm, evType, fn, useCapture) {  if (elm.addEventListener) {   elm.addEventListener(evType, fn, useCapture);   return true;  }  else if (elm.attachEvent) {   var r = elm.attachEvent('on' + evType, fn);   return r;  }  else {   elm['on' + evType] = fn;  } } 質問1 elseになるブラウザって、どのようなブラウザがあるのでしょうか? ご存知でしたら教えてください。 質問2 elseになるような場合、イベントを削除するには下記の様になるのでしょうか? elm['on'+evtType] = function () { return false; }; 以上、よろしくお願いいたします。

  • addEventListenerの使い方について

    イベントリスナでスクロール時にアラートを表示したいのですが、 以下のソースでは動作しませんでした。 どこかに簡単なイベントに対するアクションを記載したサンプルコードはありますでしょうか? <script type="text/javascript"> document.addEventListener("scroll", alview, false); funciton alview(a){ alert(1); } </script> <body>

  • CLICKイベントと、MOUSE_DOWNイベント

    AS3です。 CLICKイベントと、 MOUSE_DOWN、MOUSE_UPイベント って 併用できないのでしょうか? 画像のギャラリーを作っています。 クリックしたときに、ボタンの色が一瞬変わって、 ギャラリーの画像も変わるものを作ろうとしています。 addEventListener(MouseEvent.MOUSE_DOWN, mDown, false, 0, true); addEventListener(MouseEvent.MOUSE_UP, mUP, false, 0, true); addEventListener(MouseEvent.CLICK, mClick, false, 0, true); こうすると、 mDown、mUPのハンドラ関数は実行されるのですが mClickのハンドラ関数は無視されます。 併用できない場合、上記のことを達成するには どのようにみなさん書かれているのでしょうか? ご存知の方いらっしゃいましたら、 何卒よろしくお願いいたします。

    • ベストアンサー
    • Flash
  • イベントリスナに登録される function(e){} の "e" はeventオブジェクト?

    私はイベントリスナ登録時の匿名関数に渡す引数eの意味が今まで理解できていませんでした。 最近、下記コードを実行することで、 <script type='text/javascript'> window.addEventListener ('click', function(e){ console.info(e); // 引数をコンソール表示 (要Firebug) for (p in e){ console.info(p + ' = ' + e[p]); // プロパティを列挙 } }, false); </script> 「eventオブジェクトを渡しているらしい」と朧気ながら理解できました。 ただ、疑問点も残ります。 私の理解では、匿名関数は (function(str){ alert(str); })('Hello'); のように明示的に引数を渡さなければ、引き渡された値は undefined となるはずでした。 変数eの値はどこから出現したのでしょうか? そもそも、変数eはeventオブジェクトなのでしょうか?

  • execCommandについて

    document.execCommand("2D-position", false, true) という文章があり、どうやら領域をリサイズしたり、移動したりする事ができる様なんですが、 2D-positionの後の引数の意味について調べてみたんですがよくわかりません。 trueとfalseの位置を逆転させてみると、リサイズはできますが移動ができなくなるようです。 また、今後自分で調べられるようになるためにも javascriptにおける関数の引数や戻り値を詳細解説した書籍、HP等ありましたら 紹介していただけると幸いです。 まだまだ勉強中の為、質問自体が意味不明かもしれませんが、何卒お願いします。

  • 【JavaScript】時差を考慮して時刻を求める

    javaScriptでブラウザを開いている国(タイムゾーン)と日本との時差を考慮して時刻を求めるメソッドを作りたいです。 例えば ・アメリカでブラウザを開いている場合。(時差を17時間とする) メソッドの引数を”0:00”とした場合に"17:00"を算出。 ”20:00”を引数をした場合に"13:00"を算出。 ・中国でブラウザを開いている場合。(時差を1時間とする) ”0:00”を引数とした場合に"1:00"を算出。 ”20:00”を引数をした場合に"21:00"を算出。 どのようにすればよいのでしょうか? どうかよろしくお願いいたします。

  • SetWarningsについて

    アクセスVBAのSetWarnings メソッドのヘルプを見てるのですが、 よくわからないので教えてください。 ---------------------------------------------------------- 構文:expression.SetWarnings(WarningsOn) WarningsOn   必須 Variant システム メッセージの表示をオンにするには、True (-1) を使います。 システム メッセージの表示をオフにするには False (0) を使います。 ---------------------------------------------------------- なのですが、 True (-1) と False (0) は、 バリアント型ではなく、ブール型 (Boolean)ですよね? なぜ、 WarningsOnは「バリアント型 (Variant) の値を指定します。」 となっているのでしょうか?

  • PCの起動確認プログラム

    今作成しているシステムに、ネットワークでつながっているパソコン(サーバ)がONかOFFかを確認してONならTRUE、OFFならFALSEを返す関数を実装したいのですが、外部のパソコンの起動状態を確認するにはどんなプログラムを作ればよいかわかりません。方法がわかる方いましたら教えてください。ヒントのようなものでもかまいませんのでよろしくおねがいします。