「jQuery」onメソッドで複数のイベントリスナを登録するサンプル

2022年7月12日

環境
Google Chrome　103.0.5060.114
Windows 10 Home 64bit
jQuery 3.6.0

構文

$(要素).on({
            "mouseenter":function(e){
                  処理コード
            },
            "mouseleave":function(e){　処理コード}

jQueryのonメソッドを利用して1つの要素に複数のイベントリスナを登録します。
使用例

<!DOCTYPE html>
<html>
<body>

<style>
  #cft{height:30px;width:200px;background-color:SkyBlue;}
</style>

<div id="cft">カーソル当てて下さい</div>
<p>イベントリスナ名：<span id="show"></span></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
      $("#cft").on({
            "mouseenter":function(e){
          //mouseenterイベント
                  $("#show").text("mouseenter");
            },
            "mouseleave":function(e){
        //mouseleave イベント
                  $("#show").text("mouseleave");
            },
            "dblclick":function(e){
         //dblclick イベント
                  $("#show").text("dblclick");
            },
            "click":function(e){
         //click イベント
                  $("#show").text("click");
            }
      });
</script>
</body>
</html>

実行結果

カーソルを入れると、「イベントリスナ名：mouseenter」が表示されます。
カーソルを外す場合、「イベントリスナ名：mouseleave」が表示されます。
ダブルクリックする場合、「イベントリスナ名：dblclick」が表示されます。

jQuery

Posted by arkgame

Related posts: