快捷導(dǎo)航

JQuery中綁定事件（bind()）和移除事件（unbind()）

更新時間：2015年02月27日 14:35:54 投稿：hebedich

本文主要向大家詳細(xì)介紹了jQuery的綁定事件和移除事件的使用方法和示例分享，這里推薦給有需要的小伙伴們參考下。

有時候事件執(zhí)行完了，想取消事件的效果可以通過一定的辦法來處理。比如bind()（綁定事件）和unbind()（移除通過bind()方法添加的事件）方法來移除事件的效果。

比如下面的一個案例：

<script type="text/javascript">

    $(function(){

       $('#btn').bind("click", function(){

                     $('#test').append("<p>綁定函數(shù)1</p>");

              }).bind("click", function(){

                     $('#test').append("<p>綁定函數(shù)2</p>");

              }).bind("click", function(){

                     $('#test').append("<p>綁定函數(shù)3</p>");

              });

    })

</script>

html部分：

復(fù)制代碼代碼如下:

<body>

    <button id="btn">Click Me</button>

    <div id="test"></div>

</body>

當(dāng)點擊按鈕btn時，觸發(fā)了三個點擊事件，這里的append()方法，向div層中傳遞了三個段落內(nèi)容。

append() 方法在被選元素的結(jié)尾（仍然在內(nèi)部）追加指定內(nèi)容。它與html()方法還是不同的，html()方法是改變整個元素中的內(nèi)容，而不是向元素結(jié)尾追加內(nèi)容。text()方法與html()方法類似，但區(qū)別在于html()方法中可以寫入html的代碼，而且可以被正確的解析，而text()只能當(dāng)html代碼為正常的字符串。

這里每次點擊，都會執(zhí)行一次事件，想div層末尾添加段落。下面的代碼是取消事件效果的，可以通過刪除事件，使點擊效果失效：

復(fù)制代碼代碼如下:

<script type="text/javascript">

    $(function(){

       $('#btn').bind("click", function(){

                     $('#test').append("<p>綁定函數(shù)1</p>");

              }).bind("click", function(){

                     $('#test').append("<p>綁定函數(shù)2</p>");

              }).bind("click", function(){

                     $('#test').append("<p>綁定函數(shù)3</p>");

              });

       $('#delAll').click(function(){

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

       });

    })

</script>

$('#btn').unbind("click");這句代碼的作用就是取消元素btn下的click事件。它不僅僅對于bind()方法有效，它對于click()方法同樣有效。從某種角度上講，bind("click",function(){})與click(function(){})是等價的。

還可以針對具體的方法，刪除特定的事件。下面的代碼可以參考：

復(fù)制代碼代碼如下:

<script type="text/javascript">

    $(function(){

       $('#btn').bind("click", myFun1 = function(){

                     $('#test').append("<p>綁定函數(shù)1</p>");

              }).bind("click", myFun2 = function(){

                     $('#test').append("<p>綁定函數(shù)2</p>");

              }).bind("click", myFun3 = function(){

                     $('#test').append("<p>綁定函數(shù)3</p>");

              });

       $('#delTwo').click(function(){

              $('#btn').unbind("click",myFun2);

       });

    })

</script>

unbind()方法的第二個參數(shù)是事件對應(yīng)得執(zhí)行函數(shù)的名字，這樣執(zhí)行完后，只有myFun2這個事件被刪除了，其他兩個click事件正常執(zhí)行。

還有一種跟bind()方法類似的方法one()，區(qū)別大概就是one()方法只執(zhí)行一次。為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數(shù)。代碼如下：

復(fù)制代碼代碼如下:

<script type="text/javascript">

    $(function(){

       $('#btn').one("click", function(){

                     $('#test').append("<p>綁定函數(shù)1</p>");

              }).one("click", function(){

                     $('#test').append("<p>綁定函數(shù)2</p>");

              }).one("click", function(){

                     $('#test').append("<p>綁定函數(shù)3</p>");

              });

    })

</script>

點擊后，只執(zhí)行一次。再次點擊不會觸發(fā)效果。這就是one方法。

以上所述就是本文的全部內(nèi)容了，希望本文能夠使大家更好的理解jQuery的綁定事件和移除事件，

您可能感興趣的文章: