jQueryのイベントバブリングとtargetプロパティ

jQuery

2015.10.122022.08.23

jQueryのイベントバブリングとtargetプロパティ
1. 関連

jQueryのイベントバブリングとtargetプロパティ

jQueryではイベントバブリングと呼ばれる仕組みがあります。

イベントバブリングとはある要素Aでイベントが発生すればそのイベントは要素Aの親要素にも伝わっていくことを言います。

以下、例です。「あいうえお」と「かきくけこ」の部分をクリックするとアラートされます。

 <script type="text/javascript">
   $(function(){
     $("tr").click(function(){
       alert("クリック");
     })
   });
 </script>
<table id="a">
  <tr id="b"><td>あいうえお</td></tr>
  <tr id="c"><td>かきくけこ</td></tr>
</table>

DEMO

子要素のイベントが親要素に伝わるわけですから、最初から親要素にイベント処理を記述するのと同じことになります。

以下のように書き換えてもテーブル内をクリックするとアラートされます。

 <script type="text/javascript">
   $(function(){
     $("#a").click(function(e){
       alert("クリック");
     })
   });
 </script>
<table id="a">
  <tr id="b"><td>あいうえお</td></tr>
  <tr id="c"><td>かきくけこ</td></tr>
</table>

DEMO

clickイベント内ではtargetというものがあります。

targetを使うとクリックイベントが発生する子要素のみを取得することができます。

 <script type="text/javascript">
   $(function(){
     $("#a").click(function(e){
       alert($(e.target).html());
     })
   });
 </script>
<table id="a">
  <tr id="b"><td>あいうえお</td></tr>
  <tr id="c"><td>かきくけこ</td></tr>
</table>

DEMO