jQuery で簡単にイベントの ON/OFF を行う方法

イベントリスナー関係の難しそうな処理が不要で、初心者でもイベントのオン・オフを切り替えることができる方法です。

要は、イベントを起こさせたくないタイミングで、上記で設定した ID を消したり、つけたりするだけです。

HTML 部

<p id=”delete” class=”deleteBtn”>削除</p>
<p id=”off”>オフ</p>
<p id=”on”>オン</p>

ID = delete に対し、クリックイベントを設定します。

JS 部

// オン、オフしたいイベント（ .on で普通に書きます）
$(document).on('click', "p#delete", function(){
    console.log("削除するよ");
});

// イベントをオフにしたい場合
$(document).on('click', "#off", function(){
    $("p.deleteBtn").attr("id", "");
});

// 再度、イベントをオンにしたい場合
$(document).on('click', "#on", function(){
    $("p.deleteBtn").attr("id", "delete");
});

「オンとオフを状態によって切り替える」用途であれば、これで充分だと思いますが、どうでしょう…。

「登録しているイベントを削除」したり、「新しいイベントを動的に追加」、となると、また次元の違った話になるのは承知しています。

ID ごとに異なる処理を宣言しておいて、同じ要素に対し、ID を切り替えるだけで処理を変更できるので、使いようによってはシンプルに書けて便利かと思います。

ご意見があればお寄せ下さい。