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

時間 2019-11-12

標籤 jquery 綁定事件 bind 移除 unbind 欄目 JQuery 简体版

原文原文鏈接

有時候事件執行完了，想取消事件的效果能夠經過必定的辦法來處理。好比bind()（綁定事件）和unbind()（移除經過bind()方法添加的事件）方法來移除事件的效果。javascript

好比下面的一個案例：html

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

html部分：java

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

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

append() 方法在被選元素的結尾（仍然在內部）追加指定內容。它與html()方法仍是不一樣的，html()方法是改變整個元素中的內容，而不是向元素結尾追加內容。text()方法與html()方法相似，但區別在於html()方法中能夠寫入html的代碼，並且能夠被正確的解析，而text()只能當html代碼爲正常的字符串。函數

這裏每次點擊，都會執行一次事件，想div層末尾添加段落。下面的代碼是取消事件效果的，能夠經過刪除事件，使點擊效果失效：code

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

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

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

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

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

還有一種跟bind()方法相似的方法one()，區別大概就是one()方法只執行一次。爲每個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。代碼以下：字符串

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

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

以上所述就是本文的所有內容了，但願本文可以使你們更好的理解jQuery的綁定事件和移除事件，