javaScriptのカスタムイベントがDOMの親方向に伝播

javaScriptのカスタムイベントが親方向へ伝播

• カスタムイベントが発火後に、親方向に伝播します

  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script>
    $(function(){
   　//　親要素にイベントリスナーをつける
      $("#parent").on("child-event", function(e){
        alert("Child has been clicked");
      });
  
   　//　子要素にカスタムイベントをつける
      $("#child").click( function(){  
        $("#child").trigger( "child-event" );  // クリックしたらイベント発火
      });
    });
  </script>
  <div id="parent">Parent<br><br>  // 親要素
  	<div id="child">Child</div>　　// 子要素
  </div>

• イベントリスナーが同一要素、親要素につけれることができます
  
  • 兄弟/孫要素にイベントリスナーをつけると、何も動作しません（エラーはありません）

    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
      $(function(){
    　 // 子要素にイベントリスナーをつける
        $("#child").on("parent-event", function(e){
          alert("Child has been clicked");   // アラームウィンドが表示されない！！
        });
    
    　 // 親要素にカスタムイベントをつける
        $("#parent").click( function(){  
          $("#parent").trigger( "parent-event" ); // クリックして発火
        });
      });
    </script>
    <div id="parent">Parent<br><br>
    	<div id="child">Child</div>
    </div>