📜  jQuery 中 on() 和 live() 或 bind() 的区别

📅  最后修改于: 2021-11-25 03:51:16             🧑  作者: Mango

jQuery 提供了各种事件处理程序,如on()live()bind() 。但是,下面将讨论一些细微的差异。

bind() 方法:此方法仅将事件附加到预先存在的元素,即附加事件之前已初始化文档的状态。如果之后某个事件的选择器条件满足,则 bind() 将不会对该函数。如果从元素中删除选择器条件,它也不会起作用。

  • 例子:
    
    
    
        
        
    
    
        
            

    This is Statement 1.

                     

    This is Statement 2.

                 
                                
  • 输出:
    在点击这些声明之前:

    单击这些语句后:

live() 方法:此方法不仅将事件附加到现有元素,还附加到将来附加的元素,但如果从元素中删除选择器条件,则该方法将不起作用。

注意: live() 方法在 jQuery 1.7 版中已弃用,并在 1.9 版中删除。

  • 例子:
    
    
    
        
        
        
    
        
            

    This is Statement 1.

                     

    This is Statement 2.

                 
                        
  • 输出:
    在点击这些声明之前:

    单击这些语句后:

on() 方法:此方法不仅将事件附加到现有元素,还附加到将来附加的元素。 on() 和 live()函数的区别在于 on() 方法仍然被支持并且使用了不同的语法模式,这与上述两种方法不同。

  • 例子:
    
    
    
        
        
    
    
        
            

    This is Statement 1.

                     

    This is Statement 2.

                 
                                                
  • 输出:
    在点击这些声明之前:

    单击这些语句后:

上述方法的差异总结:

Property bind() live() on()
Deprecated Yes Yes No
Removed No Yes No
Scope Elements initialized beforehand For both current and future event binding For both current and future event binding
Syntax: $([selector]).bind([event],[function]); $([selector]).live([event],[function]); $(document).bind([event],[selector],[function]);