孤独プログラマー譚

孤独死が近い。

JavaScript バブリング中毒

以下、セレクトボックスが3つ並んだHTML。
全てのセレクトボックスが選択完了した時、何か処理を実行したいとする。

<div id="wrapper">
  <select id="select1">
    <option value="">---</option>
    <option value="1">aaa</option>
    <option value="2">bbb</option>
  </select>
  <select id="select2">
    <option value="">---</option>
    <option value="1">aaa</option>
    <option value="2">bbb</option>
  </select>
  <select id="select3">
    <option value="">---</option>
    <option value="1">aaa</option>
    <option value="2">bbb</option>
  </select>
</div>


昔の自分なら、こう書き始めていたと思う。

$('#select1').on('change', function() {
})
$('#select2').on('change', function() {
})
$('#select3').on('change', function() {
})


だが、今日知ってしまった。
changeイベントだって、上位のDOMにバブリングすることを…。

$('#wrapper').on('change', function(e) {
  // 全て選択されたら、CSSを変更
  if ($('#select1').val()
  && $('#select2').val()
  && $('#select3').val()) {
    $('#wrapper').css('background-color', '#0FF')
  }
})


もう全部バブリングでええんちゃう…?