总结jquery使用事件(复合事件、事件绑定等)

本文整理总结jquery事件，在使用jquery开发中，必定会使用到事件，下面是经常使用的事件。

1.$(document).ready()
$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。它和onload具备相似的效果。可是也有一些差别：
 当一个文档彻底下载到浏览器中时，会触发window.onload事件。而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树以后，代码就能够运行，但并不意味着全部关联文件都已经下载完毕。
一个页面中通常只有一个onload事件处理程序，并且只能一次保存对一个函数的引用；而$(document).ready()是能够有多个。
通常来讲$(document).ready()都要优于使用onload事件处理程序。可是若是关联文件尚未加载完成，则相似图像高度、宽度的属性的调用就会有问题，所以须要在不一样的时候选择合适的方法。

$(document).ready()有三种写法，分别是：

 JS Code  [http://www.xueit.com]

   
 
 
    > 
 
     $(document).ready( 
 
    function 
 
    () {  
 
    // 
 
    this is the coding... 
 
      
 
    });  
 
    > 
 
    $().ready( 
 
    function 
 
    () { 
 
    // 
 
    this is the coding... 
 
      
 
    }); 
 
    > 
 
    $( 
 
    function 
 
    () {  
 
    // 
 
    this is the coding...  
 
      
 
    }); 

   

2. 事件捕获与事件冒泡
事件捕获： 容许多个元素响应事件的一种策略。在事件捕获的过程当中，事件首先会交给最外层的元素，接着再交给更具体的元素。
事件冒泡：另一种相反的策略叫时间冒泡，当事件发生时，会首先发送给最具体的元素，在这个元素得到响应机会以后，事件会向上冒泡到更通常的元素。事件冒泡有时候会产生反作用，致使始料不及的行为。

3.阻止事件冒泡的三种方法 
指定默认操做
经过调用.preventDefault()方法能够在出发默认操做以前终止事件。

调用 event.stopPropagation()中止事件传播
jQuery提供了一个.stopPropagation()方法，使用该方法能够彻底阻止事件冒泡。实例代码以下：
使用stopPropagation()方法阻止事件冒泡

 JS Code  [http://www.xueit.com]

   
 
 
    $(document).ready( 
 
    function 
 
    () { $( 
 
    ' 
 
    switcher 
 
    ' 
 
    ).click( 
 
    function 
 
    (event){  
 
    if 
 
    ( 
 
    this 
 
    .id  
 
    == 
 
      
 
    ' 
 
    switcher-narrow 
 
    ' 
 
    ){ $( 
 
    ' 
 
    body 
 
    ' 
 
    ).addClass( 
 
    ' 
 
    narrow 
 
    ' 
 
    ); }  
 
    else 
 
      
 
    if 
 
    ( 
 
    this 
 
    .id  
 
    == 
 
      
 
    ' 
 
    switcher-large 
 
    ' 
 
    ){ $( 
 
    ' 
 
    body 
 
    ' 
 
    ).addClass( 
 
    ' 
 
    large 
 
    ' 
 
    ); } $( 
 
    ' 
 
    switcher .button 
 
    ' 
 
    ).romoveClass( 
 
    ' 
 
    selected 
 
    ' 
 
    ); $( 
 
    this 
 
    ).addClass( 
 
    ' 
 
    selected 
 
    ' 
 
    ); event.stopPropagation(); };) }); 

   

使用event.tatget属性 明确事件对象
事件处理程序中的变量event保存着事件对象。而event.tatget属性保存着发生事件的目标元素。这个属性是DOM API中规定的，可是没有被全部浏览器实现。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都可以使用这个属性。经过.target，能够肯定DOM中首先接收到事件的元素。并且，咱们知道this引用的是处理事件的DOM元素。
使用event.tatget属性 明确事件对象阻止事件冒泡的代码以下：

 JS Code  [http://www.xueit.com]

   
 
 
    $(document).ready( 
 
    function 
 
    () { $( 
 
    ' 
 
    switcher 
 
    ' 
 
    ).click( 
 
    function 
 
    (event){  
 
    if 
 
    (event.target  
 
    == 
 
      
 
    this 
 
    ) { $( 
 
    ' 
 
    switcher .button 
 
    ' 
 
    ).toggleClass( 
 
    ' 
 
    hidden 
 
    ' 
 
    ); } };) 
 
    
});
 
 
    
 
 
    
4.经常使用的事件绑定 jQuery经过使用.bind()方法为元素进行事件绑定，经过使用.unbind()方法为元素进行解除绑定。并且.bind()方法是能够执行屡次绑定的，若是没有绑定，在进行解除绑定的时候，这都是安全的。 不少时候某一个事件只须要触发一次，随后就要当即解除绑定，按照传统的作法，咱们可能会先进行事件绑定，而后在事件执行完毕后进行解除绑定。jQuery为咱们提供了一种简写的方法.one来专门解决上述情景下的繁琐的代码编写，示例以下：
 
 
    
 
     
 
       JS Code  
      [http://www.xueit.com] 
     
 
     
 
      
       
    
        
        
        
        
    
       

        
     
         
         
         
         
     
        $(document).ready(
        
     
         
         
         
         
     
        function
        
     
         
         
         
         
     
        (){ $(
        
     
         
         
         
         
     
        '
        
     
         
         
         
         
     
        #swotcjer
        
     
         
         
         
         
     
        '
        
     
         
         
         
         
     
        ).one(
        
     
         
         
         
         
     
        '
        
     
         
         
         
         
     
        click
        
     
         
         
         
         
     
        '
        
     
         
         
         
         
     
        ,toggleStyleSwitcher); });
       
    
        
        
        
        
    
       
 
     
 
    
 
 
    
5.复合事件
 
 
    
在进行事件捕获的时候，经常须要捕获组合的用户操做，而且以多个函数做为响应，这些事件咱们称为复合事件。 jQuery提供的.read()方法就是最经常使用的符合事件方法之一，除此以外，还有进行交互处理的时候用到的两个函数： .hover(over,out)    一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。 .toggle(fn,fn)   每次点击时切换要调用的函数。