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

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

構文

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$(要素).on({
"mouseenter":function(e){
処理コード
},
"mouseleave":function(e){ 処理コード}
$(要素).on({ "mouseenter":function(e){ 処理コード }, "mouseleave":function(e){ 処理コード}
$(要素).on({
            "mouseenter":function(e){
                  処理コード
            },
            "mouseleave":function(e){ 処理コード}

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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>

実行結果

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
カーソルを入れると、「イベントリスナ名:mouseenter」が表示されます。
カーソルを外す場合、「イベントリスナ名:mouseleave」が表示されます。
ダブルクリックする場合、「イベントリスナ名:dblclick」が表示されます。
カーソルを入れると、「イベントリスナ名:mouseenter」が表示されます。 カーソルを外す場合、「イベントリスナ名:mouseleave」が表示されます。 ダブルクリックする場合、「イベントリスナ名:dblclick」が表示されます。
カーソルを入れると、「イベントリスナ名:mouseenter」が表示されます。
カーソルを外す場合、「イベントリスナ名:mouseleave」が表示されます。
ダブルクリックする場合、「イベントリスナ名:dblclick」が表示されます。

 

jQuery

Posted by arkgame