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') } })
もう全部バブリングでええんちゃう…?