JQuery中的bind()和unbind()的理解

拼搏现实的明天。 2021-06-26 16:06 312阅读 0赞

**`bind()`和`unbind()`提供了事件的绑定和取消机制，既可以绑定`html`默认支持的事件，也能够绑定自定义的事件。**

**1、`JQuery`中事件可以重复绑定，不会覆盖。**

$("#button1").bind("click",function(){   
        alert("func1");  
    });  
    $("#button1").bind("click",function(){   
        alert("func2");  
    });
    
    $("#button1").bind("click",sameFunc);  
    $("#button1").bind("click",sameFunc);  
      
    function sameFunc()  
    {   
        alert("func");  
    }

当点击`button1`的时候，这`2`个事件处理函数都会触发。上面绑定的是不同的匿名函数，占用不同的内存空间。就算是同一个处理函数，依然存在重复绑定问题。当`button1`被点击的时候，上面的事件处理函数同样会被调用2次。

**2、使用`bind`一次绑定多个事件和处理函数。**

如果多个事件需要注册相同的处理函数，那么可以使用如下代码进行简化(事件名称使用空格分隔)：

$("#button1").bind("mousedown mouseup",function(){   
        console.log(11);  
    });

如果每个事件的处理函数不同，那么可以使用如下的方式(`json`对象)：

$("#button1").bind(  
        {   
            "mousedown":function(){   
                console.log("mousedown");  
            },  
            "mouseup":function(){   
                console.log("mouseup");  
            }  
        }  
    );

**3、传递`event`对象和自定义参数**

$("#button1").bind("click", { name:"aty"}, function(eventObject){     
        alert("params=" + eventObject.data.name);    
    });

`eventObject`很像IE和FF中的`event`对象，通过它能够获取事件发生时更详细的信息。如果我们指定了自定义的参数，那么JQuery会将它放在事件对象的`data`属性中，即通过`eventObject.data`就能够拿到我们传递的参数值。

**4、事件取消的三种形式。**

`unbind`用来取消之前通过`bind`绑定的事件处理函数，总的来说有三种形式：取消所有事件、取消某种类型的事件、取消某种类型下的某个事件处理函数。

$("#button1").bind("click",func1);   
    $("#button1").bind("click",func2);   
      
    // try to cancel function2 
    $("#button1").unbind("click",func2);   
      
    function func1()  
    {   
        console.log("click1");    
    }  
      
    function func2()  
    {   
        console.log("click2");    
    }

`$("#button1").unbind()`：取消`button1`上所有已经绑定的事件处理函数。

`$("#button1").unbind("click")`：只取消`button1`上绑定的`click`类型的事件处理函数。

虽然`bind`和`unbind`是用的匿名函数功能是相同的，但是这2个函数不是同一个`javascript`对象，因为它们占用不同的内存空间。可以看到这种做法非常的不好，因为这种做法不允许使用匿名函数，我们不得不暴露全局的函数(至少要求`unbind`的时候能够看得见)。`JQuery`提供了事件命名空间机制

**5、事件命名空间。**

所谓事件命名空间，其实就是在事件类型后面以点语法附加一个别名，以便引用事件，如”`click.a`”，其中”`a`”就是`click`当前事件类型的别名，即事件命名空间。

$("#button1").bind("click.a",function(eventObj){     
        console.log("click1");    
    });   
    $("#button1").bind("click.b",function(eventObj){     
        console.log("click2");    
    });   
      
    // success to cancel function2 
    $("#button1").unbind("click.a");

可以看到：使用命名空间，能够以一种更优雅的方式取消某种事件类型下的某个事件处理函数。这里值得一提：使用了命名空间与`unbind`并不冲突，上面三种形式的unbind依然可以正常使用。`$("#button1").unbind()`依然可以取消`button1`上的所有事件，`$("#button1").unbind("click")`依然可以取消所有的`click`事件。

$("#button1").unbind("click.a");  
    $("#button1").unbind("mouseup");  
    $("#button1").unbind("mousedown");  
    $("#button1").unbind(".a");