off()メソッドによるイベントハンドラの削除 off()メソッドは、on()メソッドで追加されたイベントハンドラを削除するために使用されます。
$("#element").off(); - すべてのイベントを削除 $("#element").off("click"); - 特定のイベントを削除 $("#element").off("click mouseenter"); - 複数の指定イベントを削除（スペースで区切る）
<html>
<head>
<meta charset="UTF-8">
<title>jQuery off() メソッドの例</title>
<style type="text/css">
* { margin: 0; padding: 0; }
#container {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 50px auto;
}
.trigger-btn {
width: 100px;
height: 50px;
background: #ccc;
margin: 20px auto;
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container"></div>
<button class="trigger-btn">イベント削除</button>
<script>
$(document).ready(function() {
// 複数の異なるイベントにバインドし、異なる関数を実行
$("#container").on({
click: function() {
console.log("コンテナがクリックされました");
},
mouseenter: function() {
console.log("マウスがコンテナに入りました");
},
mouseleave: function() {
console.log("マウスがコンテナから出ました");
}
});
// off()メソッドでイベントハンドラを削除
$(".trigger-btn").on("click", function() {
// コンテナにバインドされたイベントを削除
// $("#container").off(); // すべてのイベントを削除
// $("#container").off("click"); // 特定のイベントを削除
$("#container").off("click mouseenter"); // 指定された複数のイベントを削除
});
});
</script>
</body>
</html>
one()メソッドによる一度だけ実行されるイベントバインディング 一度だけ実行されるイベントバインディングが必要な場合は、one()メソッドを使用します。
<html>
<head>
<meta charset="UTF-8">
<title>jQuery one() メソッドの例</title>
<style type="text/css">
* { margin: 0; padding: 0; }
#container {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 50px auto;
}
.trigger-btn {
width: 100px;
height: 50px;
background: #ccc;
margin: 20px auto;
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="container"></div>
<button class="trigger-btn">テストボタン</button>
<script>
$(document).ready(function() {
// 一度だけ実行されるイベントバインディング
$("#container").one({
click: function() {
console.log("コンテナがクリックされました（一度だけ）");
},
mouseenter: function() {
console.log("マウスがコンテナに入りました（一度だけ）");
},
mouseleave: function() {
console.log("マウスがコンテナから出ました（一度だけ）");
}
});
});
</script>
</body>
</html>