jQueryでonメソッドを使って複数のイベントリスナを登録する

2014年8月16日2021年11月12日

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

<style>
.show{height:40px;width:250px;border:1px solid #000;background-color:skyblue}
</style>

<div class="show">複数のイベントリスナを登録</div>
<div>操作：<span class="cft"></span></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  /*onメソッドで複数のイベントリスナを登録*/
      $(".show").on({
       　/*mouseenterイベント*/
            "mouseenter":function(e){
                  $(".cft").text("mouseenterカーソルを入れる");
            },
        /*mouseleaveイベント*/
            "mouseleave":function(e){
                  $(".cft").text("mouseleaveカーソルを外す");
            },
        /*dblclickイベント*/
            "dblclick":function(e){
                  $(".cft").text("dblclickダブルクリックする");
            },
        /*clickイベント*/
            "click":function(e){
                  $(".cft").text("clickクリックする");
            }
      });
</script>