jQuery之事件移除


有時候事件執行完了,想取消事件的效果可以通過一定的辦法來處理。比如bind()方法,可以通過unbind()方法來移除事件的效果。

比如下面的一個案例:

<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部分:

<body>
<button id="btn">點擊我</button>
<div id="test"></div>
</body>

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

append() 方法在被選元素的結尾(仍然在內部)插入指定內容。它與html()方法還是不同的,html()方法是改變整個元素中的內容,而不是向元素結尾插入內容。text()方法與html() 方法類似,但區別在於html()方法中可以寫入html的代碼,而且可以被正確的解析,而text() 只能當html代碼為正常的字符串。

這里每次點擊,都會執行一次事件,想div層末尾添加段落。

下面的代碼是取消事件效果的,可以通過刪除事件,使點擊效果失效:

<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(){})是等價的。

 

還可以針對具體的方法,刪除特定的事件。

下面的代碼可以參考:

<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事件正常執行。

 

還有一種跟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方法。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM