jQuery bind and unbind (綁定和解除)

時間 2019-12-13

原文原文鏈接

測試：
頁面代碼：

<body>
    <input type="button" name="aaa" value="點擊我">
    <input type="checkbox" name="checkbox1">

</body>
JQuery代碼：
$().ready(function(){
      for (var i = 0; i < 3; i++) {
            $("input[type='button']").click(function(){
               alert("aaaa");
          });

 
     }
}

alert ("aaaa")會執行三次，在事件嵌套事件中，不但願看到這樣的狀況，須要把上層事件禁用，此時可引入bind和unbind函數解決。
引入函數:

for (var i = 0; i < 3; i++) {
        $("input[type='button']").unbind("click");
        $("input[type='button']").bind("click", function(){
            alert("aaa");
        });
 }

alert("aaa");僅執行一次。

bind() 方法爲被選元素添加一個或多個事件處理程序，並規定事件發生時運行的函數
unbind() 方法移除被選元素的事件處理程序。可以移除全部的或被選的事件處理程序，或者當事件發生時終止指定函數的運行。
event 是事件類型，類型包括：blur、flcus、load、resize、scroll、unload、click、dblclikc、mousedown、 mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、 select、submit、keydown、keypress、keyup和error等，固然也能夠是自定義名稱。
data 爲可選參數，做文event.data屬性值傳遞給事件對象的額外數據對象。
function 是用來綁定的處理函數。
語法：
$(selector).bind(event,data,function) // event 和 function 必須指出

下面些段代碼作說明：javascript

例1：刪除p的全部事件html

$("p").unbind();

例2：刪除p的click事件java

$("p").unbind("click");

例2：刪除p元素click事件後出發的test函數和添加p元素click事件後觸發的test函數web

$("p").unbind("click",test); $("p").bind("click",test);

注意：要定義 .bind() 必須指明什麼事件和函數函數

如今來看個簡單的demo ，整個div有一個點擊收起展開的事件，若是想要點擊連接可是不觸發div的點擊事件，須要在觸發連接的時候把div的點擊事件禁用，這裏我用到連接 mouseenter事件是unbind刪除div的事件。這裏還不算完，這時候只要鼠標進入連接區域，div的點擊事件就刪除了，咱們還須要加入鼠標移出連接區域的時候恢復div點擊事件。代碼以下：測試

$(function(){ var Func = function(){ $(".com2").toggle(200); } $(".test").click(Func) $(".test a").mouseenter(function(){ $(".test").unbind(); //刪除.test的全部事件 }); $(".test a").mouseleave(function(){ $(".test").bind("click",Func); //添加click事件 }); }); event 是事件類型
…
function 是用來綁定的處理函數。
部份內容來自http://www.dearoom.com/blog/詳解unbind和bind/ http://www.dearoom.com/blog/事件捕獲事件冒泡和阻止事件冒泡/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。