帶你了解JQuery中綁定事件（bind()）和移除事件（unbind()）-js教程-PHP中文網

帶你了解JQuery中綁定事件（bind()）和移除事件（unbind()）

巴扎黑

發布： 2017-06-25 14:50:57

原創

1863 人瀏覽過

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

有時候事件執行完了，想取消事件的效果可以用一定的辦法來處理。例如bind()（綁定事件）和unbind()（移除透過bind()方法新增的事件）方法來移除事件的效果。

例如下面的案例：

程式碼如下:

<script type="text/
javascript
">
    $(function(){
       $(&#39;#btn&#39;).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
    })
</script>

登入後複製

html部分：

程式碼如下:

<body>
    <button id="btn">Click Me</button>
    <p id="test"></p>
</body>

登入後複製

當點擊按鈕btn時，觸發了三個點擊事件，這裡的append()方法，向p層中傳遞了三個段落內容。

append() 方法在被選取元素的結尾（仍在內部）會追加指定內容。它與html()方法還是不同的，html()方法是改變整個元素中的內容，而不是向元素結尾追加內容。 text()方法與html()方法類似，但差別在於html()方法中可以寫入html的程式碼，而且可以被正確的解析，而text()只能當html程式碼為正常的字串。

這裡每次點擊，都會執行一次事件，想p層結尾加入段落。以下的程式碼是取消事件效果的，可以透過刪除事件，讓點擊效果失效：

#程式碼如下:

<script type="text/javascript">
    $(function(){
       $(&#39;#btn&#39;).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
       $(&#39;#delAll&#39;).click(function(){
              $(&#39;#btn&#39;).unbind("click");
       });
    })
</script>

登入後複製

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

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

程式碼如下:

<script type="text/javascript">
    $(function(){
       $(&#39;#btn&#39;).bind("click", myFun1 = function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).bind("click", myFun2 = function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).bind("click", myFun3 = function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
       $(&#39;#delTwo&#39;).click(function(){
              $(&#39;#btn&#39;).unbind("click",myFun2);
       });
    })
</script>

登入後複製

unbind()方法的第二個參數是事件對應到執行函數的名字，這樣執行完後，只有myFun2這個事件被刪除了，其他兩個click事件正常執行。

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

程式碼如下:

<script type="text/javascript">
    $(function(){
       $(&#39;#btn&#39;).one("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).one("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).one("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
    })
</script>

登入後複製

點擊後，只執行一次。再次點選不會觸發效果。這就是one方法。

以上是帶你了解JQuery中綁定事件（bind()）和移除事件（unbind()）的詳細內容。更多資訊請關注PHP中文網其他相關文章！