總結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)   每次點擊時切換要調用的函數。