jqueryにおけるclickイベントのバインドと削除のいくつかの方法のまとめ

バインドイベントとバインド解除イベントはよく使われる書き方で、ここではいくつかの一般的なバインドイベントとバインド解除イベントの方法をまとめた.
clickイベントのバインド
一:htmlタグに直接イベントを追加する---HTML要素行間イベント(JavaScriptオリジナルイベントと書く)

function test() {
    alert("    ");
}

欠点:htmlとjsの緊密な結合
二:jqのclickメソッドを使用してバインドする

$("#btn").click(function(){
     alert("jquery  click    ");
})

三:jqのbindメソッドでバインドする

$("#btn").bind("click",function(){
   alert("jquery  bind    ");
})

四:jqを用いたonメソッドバインド

$("#btn").on("click",function(){
    alert("jquery  on    ");
})

五:jqのバインド可能な動的要素を用いたonメソッドバインド

 $("body").on("click","#btn", function () {
      alert("jquery  on         ");
 })

ボタンをクリックすると、この5つのイベントが実行され、実行順序:1>2=3=4>5
その中で行間イベントonclickという書き方のイベントが最初にトリガーされ、次にリスニングイベントclickメソッドバインドである.この書き方は書き方3のonメソッド、メソッド4のbindメソッドと同じであり、彼ら3つの間の順序はコードの順序に依存し、誰が先に縛られ、メソッド5もonメソッドを使用しているが、この書き方は動的要素にイベントをバインドすることができる.たとえば、サーバからページに動的にロードするように要求された要素を送信すると、ロードされた要素はデフォルトではバインドイベントがありませんが、方法5を使用して、このような動的要素にイベントをバインドすることに成功します.この書き方は、実際に発生したイベント依頼であり、親要素bodyを傍受し、サブ要素の代わりにclickイベントを実行するので、実行順序は前の4つの後です.
clickイベントの削除
書き方1の削除:

function test() {
    alert("    ");
}

このような書き方は、

/*         */
document.getElementById("btn").onclick = test;
/*    */
function test() {
    alert("    ");
}

では、イベントを削除するのは簡単です.コードで終わります.

document.getElementById("btn").onclick = null;

またはjqメソッドを使用して削除します.

 $("#btn").prop("onclick",null);

複数のclickイベントを複数の書き方でバインドすると、すべてのclickイベントが削除されます.

 $("#btn").prop("onclick",null).off("click");

書き方2、3、4の削除:

$("#btn").on("click",function(){
        alert("jquery  on    ");
})
$("#btn").click(function(){
        alert("jquery  click    ");
})
$("#btn").bind("click",function(){
        alert("jquery  bind    ");
})

unbindメソッドの直接使用

$("#btn").unbind("click");

またはoffメソッドを使用します.

$("#btn").off("click");

書き方5 onを使用して動的要素をバインドする削除:
この書き方はunbindを使用して無効です.バインドされたオブジェクトが親要素bodyであるため、ペアの関数offで削除する必要があります.

$("body").off("click","#btn");

なお、イベント依頼の書き方のバインド解除要素は、イベントバインドのターゲット要素と一致する必要があります(すなわち、ケースbody、#btnは1つずつ対応する必要があります).そうでなければ有効ではありません.jQueryバージョン1.7から、on()メソッドはbind()、live()およびdelegate()メソッドの新しい代替品である.off()法はunbind(),die()およびundelegate()法の新しい代替品である.使いやすくておすすめです.
off関数のパラメータについては、次のように説明します.

    /*     ，        */
    $("#btn").off();
    /*        ，            */
    $("#btn").off('click');
    /*        ，             */
    $("#btn").off('click',test);

原文作成者の技術ブログ:https://www.jianshu.com/u/ac4daaeecdfe95后の前端の妹は1枚、読むのが好きで、友达を爱して、仕事の中で出会った问题をここに记录して、すべての见たあなたに少し助けをもたらすことができることを望みます.メッセージ交換を歓迎します.