jQueryでテキストボックスに複数イベントリスナを登録

2014年3月23日2021年11月12日

書式

$("セレクタ名").on({
 "イベント名1":function(e){処理コード　},
 "イベント名2":function(e){処理コード　}
 xxx
}

使用例

<p><input type="text" id="username" value="yamada"></p>
<div>操作：<span class="show"></span></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
   /*onメソッド*/
      $("#username").on({
    　　/*テキストボックス内にカーソルを当てる*/
            "focus":function(e){
                  $(".show").text("focusイベント");
            },
        /*テキストボックス内でenterを押下*/
        "change":function(e){
                  $(".show").text("changeイベント");
            },
        /*カーソルを外して任意の箇所をクリック*/
            "blur":function(e){
                  $(".show").text("blurイベント");
            }
      });
</script>