【jQuery】unbind()を使って設定したイベントを解除する！

設定したイベントの解除を行うにはjQueryのunbind()メソッドを使用します。

jQueryのunbind()メソッドとはセレクタにマッチする要素のイベントを解除するメソッドであり、bind()メソッドでイベント設定された要素のイベントを発生させないようにすることができます。

そして、unbind()にパラメータを指定することで、特定のイベントやイベントハンドラを解除することができたり、複数のイベントやイベントハンドラを解除することもできます。

また、unbind()はbind()だけでなく、on()で設定されたイベントも解除することが可能です。

今回は、jQueryのunbind()メソッドを使って要素にイベントの解除を行う方法について以下の内容で解説していきます。

⚫︎ 設定した単数のイベントを解除する場合
⚫︎ 設定した複数のイベントを解除する場合
⚫︎ 設定したイベントのイベントハンドラを解除する場合
⚫︎ 設定したイベントを全て解除する場合

⚫︎ unbind()でon()で設定したイベントを解除する方法

unbind()とは
- unbind()の書き方
- パラメータ
設定したイベントを解除するサンプルコード
on()で設定したイベントをunbind()で解除する方法
今回のポイント
- unbind()で要素のイベントを解除
関連記事

今回はjQueryのunbind()メソッドで要素にイベントを紐づける方法について説明していきます。

お願いします！

unbind()とは

unbind()とは、セレクタにマッチする要素のイベントを解除するメソッドとなります。

unbind()の書き方

unbind()メソッドの書き方は下記となります。

$("セレクタ").unbind(["イベント名"] [,"イベントハンドラ"]);

1	$("セレクタ").unbind(["イベント名"] [,"イベントハンドラ"]);

パラメータ

⚫︎ イベント名(任意):
解除したいイベント名を指定する(clickやmouseoverなど)
⚫︎ イベントハンドラ(任意):
解除したいイベントハンドラを指定する

unbind()メソッドのパラメータにイベント名を指定することで要素のイベントを解除することができます。
また、第2パラメータにイベントハンドラを指定すると、該当するイベントに割り当てられたイベントハンドラを解除することができます。

しかし、イベントハンドラに無名関数を指定した場合、イベントは解除されません。

設定したイベントを解除するサンプルコード

unbind()で設定したイベントを解除するサンプルコードを紹介します。

設定した単数のイベントを解除する場合

設定した単数のイベントを解除する場合はunbind()のパラメータにイベント名を指定します。

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <h2>unbind()でイベントを解除する</h2>
  <div class= "sampleA">
  </div>
  <div class= "sampleB">
  </div>
  <div class= "sampleC">
  </div>
  <input type= "button" class= "btn1" value= "イベントの解除">
  <script src="index.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2>unbind()でイベントを解除する</h2>

</div>

</div>

</div>

</body>

</html>

style.css

.sampleA {
  width: 100px;
  height: 100px;
  background-color: tomato;
}
.sampleB {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}
.sampleC {
  width: 100px;
  height: 100px;
  background-color: yellowgreen;
}

.sampleA {

width: 100px;

height: 100px;

background-color: tomato;

}

.sampleB {

width: 100px;

height: 100px;

background-color: skyblue;

}

.sampleC {

width: 100px;

height: 100px;

background-color: yellowgreen;

}

index.js

$(function(){
  $("div").bind("click",function() {
    alert("イベントが実行されます。")
  });
  $(".btn1").bind("click",function() {
    $("div").unbind("click");
  });
});

$(function(){

$("div").bind("click",function() {

alert("イベントが実行されます。")

});

$(".btn1").bind("click",function() {

$("div").unbind("click");

});

出力結果

unbind()のパラメータにイベント名を指定することで設定した単数のイベントを解除することができます。
そのため、ボタンを押すと、クリックイベントが解除されます。

設定した複数のイベントを解除する場合

unbind()で設定した複数のイベントを解除する場合はunbind()メソッドのパラメータであるイベント名を半角空白空けて指定します。

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <h2>unbind()で複数のイベントを解除する</h2>
  <div class= "sampleE">
  </div>
  <div class= "sampleF">
  </div>
  <div class= "sampleG">
  </div>
  <input type= "button" class= "btn1" value= "イベントの解除">
  <script src="index.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2>unbind()で複数のイベントを解除する</h2>

</div>

</div>

</div>

</body>

</html>

style.css

.sampleE {
  width: 100px;
  height: 100px;
  background-color: tomato;
}
.sampleF {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}
.sampleG {
  width: 100px;
  height: 100px;
  background-color: yellowgreen;
}

.sampleE {

width: 100px;

height: 100px;

background-color: tomato;

}

.sampleF {

width: 100px;

height: 100px;

background-color: skyblue;

}

.sampleG {

width: 100px;

height: 100px;

background-color: yellowgreen;

}

index.js

$(function(){
  $("div").bind("click mouseover mouseout",function() {
    alert("イベントが実行されます。")
  });
  $(".btn1").bind("click",function() {
    $("div").unbind("click mouseover");
  });
});

$(function(){

$("div").bind("click mouseover mouseout",function() {

alert("イベントが実行されます。")

});

$(".btn1").bind("click",function() {

$("div").unbind("click mouseover");

});

出力結果

unbind()のパラメータにイベント名を半角空白を空けて指定することで複数のイベントを紐づけています。
そのため、マウスを要素の上に持っていく場合と要素からマウスを離した場合には各要素のid名が表示されています。

設定したイベントのイベントハンドラを解除する場合

bind()で設定したイベントのイベントハンドラを解除する場合は第1パラメータにイベント名、第2パラメータにイベントハンドラを指定します。

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <h2>unbind()で設定したイベントハンドラを解除する</h2>
  <div class= "sampleA">
  </div>
  <div class= "sampleB">
  </div>
  <div class= "sampleC">
  </div>
  <p class= "out"></p>
  <input type= "button" class= "btn1" value= "イベントの解除">
  <script src="index.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2>unbind()で設定したイベントハンドラを解除する</h2>

</div>

</div>

</div>

</body>

</html>

style.css

.sampleA {

  width: 100px;
  height: 100px;
  background-color: tomato;
}
.sampleB {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}
.sampleC {
  width: 100px;
  height: 100px;
  background-color: yellowgreen;
}

.sampleA {

width: 100px;

height: 100px;

background-color: tomato;

}

.sampleB {

width: 100px;

height: 100px;

background-color: skyblue;

}

.sampleC {

width: 100px;

height: 100px;

background-color: yellowgreen;

}

index.js

function bindEve() {
  alert("イベントが発生しました。");
}
$(function(){
  $("div").bind("click mouseover",bindEve);
  $(".btn1").bind("click",function() {
    $("div").unbind("click", bindEve);
    });
  });

function bindEve() {

alert("イベントが発生しました。");

}

$(function(){

$("div").bind("click mouseover",bindEve);

$(".btn1").bind("click",function() {

$("div").unbind("click", bindEve);

});

出力結果

unbind()の第1パラメータにイベント名、第2パラメータにイベントハンドラを指定することで設定したイベントのイベントハンドラを解除することができます。
そのため、ボタンを押すとクリックイベントが解除されますが、マウスオーバーのイベントは残ります。

unbind()の第1パラメータにイベント名、第2パラメータにイベントハンドラを指定することで設定したイベントのイベントハンドラを解除することができるのですね！

そうですね。
しかし、イベントハンドラに無名関数を指定した場合はイベント解除が行われませので注意してください。

設定したイベントを全て解除する場合

設定したイベントを全て解除する場合はunbind()メソッドをパラメータ無しで使用します。

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <h2>unbind()でイベントを全て解除する</h2>
  <div class= "sampleA">
  </div>
  <div class= "sampleB">
  </div>
  <div class= "sampleC">
  </div>
  <p class= "out"></p>
  <input type= "button" class= "btn1" value= "イベントの解除">
  <script src="index.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2>unbind()でイベントを全て解除する</h2>

</div>

</div>

</div>

</body>

</html>

style.css

.sampleA {
  width: 100px;
  height: 100px;
  background-color: tomato;
}
.sampleB {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}
.sampleC {
  width: 100px;
  height: 100px;
  background-color: yellowgreen;
}

.sampleA {

width: 100px;

height: 100px;

background-color: tomato;

}

.sampleB {

width: 100px;

height: 100px;

background-color: skyblue;

}

.sampleC {

width: 100px;

height: 100px;

background-color: yellowgreen;

}

index.js

function bindEve() {
  alert("イベントが発生しました。");
}
$(function(){
  $("div").bind("click mouseover",bindEve);
  $(".btn1").bind("click ",function() {
    $("div").unbind();
  });
});

function bindEve() {

alert("イベントが発生しました。");

}

$(function(){

$("div").bind("click mouseover",bindEve);

$(".btn1").bind("click ",function() {

$("div").unbind();

});

出力結果

unbind()メソッドをパラメータ無しで使用することで指定した要素のイベントを全て解除することができます。
そのため、ボタンをクリックすると何も起きなくなります。

unbind()をパラメータ無しで使用すると設定されているイベントを全て解除することができるのですね！

そうですね。
unbind()をパラメータには何も指定がありませんから、指定した要素に設定されているイベントが全て解除されます。

on()で設定したイベントをunbind()で解除する方法

on()で設定したイベントをunbind()で解除する方法を紹介します。

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <h2>on()で設定したイベントをunbind()で解除する</h2>
  <div class= "sampleA1">
  </div>
  <div class= "sampleB1">
  </div>
  <div class= "sampleC1">
  </div>
  <p class= "out"></p>
  <input type= "button" class= "btn1" value= "イベントの解除">
  <script src="index.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2>on()で設定したイベントをunbind()で解除する</h2>

</div>

</div>

</div>

</body>

</html>

style.css

.sampleA1 {
  width: 100px;
  height: 100px;
  background-color: tomato;
}
.sampleB1 {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}
.sampleC1 {
  width: 100px;
  height: 100px;
  background-color: yellowgreen;
}

.sampleA1 {

width: 100px;

height: 100px;

background-color: tomato;

}

.sampleB1 {

width: 100px;

height: 100px;

background-color: skyblue;

}

.sampleC1 {

width: 100px;

height: 100px;

background-color: yellowgreen;

}

index.js

function bindEve() {
  alert("イベントが発生しました。");
}
$(function(){
  $("div").on("click mouseover",bindEve);
  $(".btn1").bind("click ",function() {
    $("div").unbind();
  });
});

function bindEve() {

alert("イベントが発生しました。");

}

$(function(){

$("div").on("click mouseover",bindEve);

$(".btn1").bind("click ",function() {

$("div").unbind();

});

出力結果

on()メソッドでイベントを設定した要素をunbind()メソッドで解除することができます。
そのため、要素をクリックやマウスを重ねると、アラートが発生しますが、ボタンを押すと何も起きなくなります。

今回のポイント

unbind()で要素のイベントを解除

⚫︎ 設定したイベントを解除するにはjQueryのunbind()メソッドを使用する

⚫︎ unbind()で設定した単数のイベントを解除する場合は第1パラメータにイベント名を指定する

⚫︎ unbind()で設定した複数のイベントを解除する場合は第1パラメータにイベント名を半角空白で指定する

⚫︎ unbind()で設定したイベントハンドラを解除する場合は第1パラメータにイベント名を、第2パラメータにセレクタを指定する

⚫︎ unbind()で設定したイベントを全て解除する場合はunbind()をパラメータなしで使用する

⚫︎ unbind()はbind()だけでなくon()で設定したイベントを解除することができる

jQueryのbind()メソッドで要素にイベントを紐づける方法についてはこちらをご参考ください。

2020.10.19

【jQuery】bind()を使って要素にイベントを紐づける！

要素にイベントを紐づけるにはjQueryのbind()メソッドを使用します。 jQueryのbind()メソッドとは要素に対してイベントを設定するメソッドであり、ボタンや画像などをクリックした際にイベントを発生させることができます。イベントを発生させる...

jQueryのon()メソッドで要素のイベントを設定する方法についてはこちらをご参考ください。

2020.10.20

【jQuery】on()を使って要素にイベントの設定を行う！

要素にイベントの設定を行うにはjQueryのon()メソッドを使用します。 jQueryのon()メソッドとはセレクタにマッチする要素にイベントを紐づけるメソッドであり、ボタンや画像などをクリックした際にイベントを発生させることができます。イベントを発...

jQueryのoff()メソッドで要素のイベントを解除する方法についてはこちらをご参考ください。

2020.10.23

【jQuery】off()を使ってイベントの解除を行う！

要素にイベントの解除を行うにはjQueryのoff()メソッドを使用します。 jQueryのoff()メソッドとはでセレクタにマッチする要素のイベントを解除するメソッドであり、on()メソッドでイベント設定された要素のイベントを発生させないようにすることができます。 ...

Writer

株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語：swift、JS系(Node.js等)。好きなサーバー：AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

【jQuery】submit()を使って送信する前に処理を行う！

【jQuery】:animatedを使ってアニメーションの要素を指定する！