「jQuery」onメソッドで複数のイベントリスナを登録するサンプル
環境
Google Chrome 103.0.5060.114
Windows 10 Home 64bit
jQuery 3.6.0
構文
$(要素).on({
"mouseenter":function(e){
処理コード
},
"mouseleave":function(e){ 処理コード}
$(要素).on({
"mouseenter":function(e){
処理コード
},
"mouseleave":function(e){ 処理コード}
$(要素).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>
<!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>
実行結果
カーソルを入れると、「イベントリスナ名:mouseenter」が表示されます。
カーソルを外す場合、「イベントリスナ名:mouseleave」が表示されます。
ダブルクリックする場合、「イベントリスナ名:dblclick」が表示されます。
カーソルを入れると、「イベントリスナ名:mouseenter」が表示されます。
カーソルを外す場合、「イベントリスナ名:mouseleave」が表示されます。
ダブルクリックする場合、「イベントリスナ名:dblclick」が表示されます。
カーソルを入れると、「イベントリスナ名:mouseenter」が表示されます。 カーソルを外す場合、「イベントリスナ名:mouseleave」が表示されます。 ダブルクリックする場合、「イベントリスナ名:dblclick」が表示されます。