「jQuery」onメソッドで複数のイベントリスナを登録するサンプル
環境
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」が表示されます。