事件, 事件流, 事件委託

事件 :

 一. 事件驅動程序的(三要素):
   
     1. 事件 : javascript捕獲用戶的操做或是頁面中的行爲(如 : onclick, onmouseover, keydown等等)
        
     2. 事件源 : 觸發這個事件的元素(如 : 一個按鈕, 一個按鍵等等)

     3. 事件處理程序 : 爲該事件被觸發時所執行的程序,也稱爲"事件句柄"和"事件監聽器"
     

二. 綁定事件(有兼容性問題)

    1. 在 IE 中,給一個對象的同一事件添加或刪除多個處理程序的方式:
       
       對象 . attachEvent("on事件","處理程序");    添加事件

       對象 . detachEvent("on事件","處理程序");    刪除事件

       注意 : 這兩個方法內添加的事件的執行順序與添加順序相反;
              
             沒法刪除匿名函數(由於找不到函數的引用);

    2. 在 W3C 的標準瀏覽器中,給一個對象的同一事件添加或刪除多個處理程序的方式:

       對象 . addEventLisener("事件","處理程序",boolean);   添加事件

       對象 . removeEventLisener("事件","處理程序",boolean);  刪除事件

       注意 : 這兩個方法內添加的事件的執行順序與添加順序一致;

             沒法刪除匿名函數(由於找不到函數的引用);

    3. 每個事件被觸發時,程序都會爲該事件產生一個臨時的事件對象,這個對象包含了事件產生時的某些信息,當函數調用完後,這個對象被釋放掉
       代碼展現(例子) : btn.onclick=function(e){
                           var ev = e || windown.event;
                           ............................
                      }
       解釋 : 上面中的 e 就是點擊事件時所產生的事件對象;
              windown.event : 爲IE中獲取事件對象的方式
              e : 爲其餘瀏覽器獲取事件對象的方式
       
三. 鼠標事件(當鼠標事件被觸發時,對應的事件對象有以下的屬性:)

   1. 鼠標相對於瀏覽器的位置 :  clientX,  clientY
   
   2. 鼠標相對於屏幕的位置 : screenX, screenY
  
   3. 鼠標相對於事件源(調用事件的對象)的位置 : offsetX, offsetY (不支持FF,FF須要經過計算)

   4. onmouseover    鼠標移入某對象
   
   5. onmouseout     鼠標移出某對象

   6. onmouseup      鼠標擡起時

   7. onmousedown    鼠標按下時

   8. onmousemove    鼠標移動時

   9. DOMMouseScroll  鼠標滾輪事件(FF)   
      此方法的事件對象的屬性有 : detail (若爲正值,表示鼠標滾輪向下滑;負值,向上滑)

   10. onmousewheel   鼠標滾輪事件(IE,chrom)
       此方法的事件對象的屬性有 : wheelDelta(若爲正值,表示鼠標滾輪向上滑;負值,向下滑)

   (百度出來的)event 的某些屬性值獲得這些信息： 
   1. 「mousewheel」 事件中的 「event.wheelDelta」 屬性值：返回的值，若是是正值說明滾輪是向上滾動，若是是負值說明滾輪是向下滾動；返回的值，均爲 120 的倍數，即：幅度大小 = 返回的值 / 120。 
   
   2. 「DOMMouseScroll」 事件中的 「event.detail」 屬性值：返回的值，若是是負值說明滾輪是向上滾動（與 「event.wheelDelta」 正好相反），若是是正值說明滾輪是向下滾動；返回的值，均爲 3 的倍數，即：幅度大小 = 返回的值 / 3。 



四. 鍵盤事件

   1. keydown   按下鍵盤按鍵時

   2. keyup     擡起鍵盤按鍵時

   3. keypress  按住鍵盤按鍵時

   4. keyCode   enter : 13
                shift : 16
                ctrl  : 17
                alt   : 18
   
   5. altkey, ctrlkey, shiftkey : 是否按下對應的鍵,是返回true,否返回false;


五. 檢測事件類型 : type="事件"

    例如 : type = "click";  表示該事件的類型爲點擊事件

  

事件流

 一. 事件流(IE只支持冒泡型事件)

1. 冒泡型事件 : 從裏往外冒泡;若是被點擊的對象沒有設置事件,但其仍然是事件源(點擊哪一個,哪一個就是事件源),只是沒有給它設置相應的事件,此時,它會把這個事件委託給其外層的對象;若是這個事件源裏有須要執行的程序,這個程序會被執行以後再繼續向外冒泡.(addEventLisener("事件",foo,false))

2. 捕獲型事件 : 從最外層往裏冒泡(最外層可到達window對象),(addEventLisener("事件",foo,true))


二. DOM標準的事件模型(冒泡和捕獲都支持),當綁定了捕獲和冒泡程序時,先執行捕獲,在執行冒泡


三. 阻止事件流

1. IE :  事件對象 . cancelBubble = true;
2. FF :  事件對象 . stoppropagation;

解釋 : 在A對象添加的方法內設置上面的兩個屬性,點擊A對象,若爲冒泡型,則冒泡到該對象就不會繼續擴展了;
若爲捕獲型,則從最外層捕獲到這層時,就不會繼續向裏捕獲了.


四. 事件對象的屬性

1. 事件對象的屬性 : IE    target

                  FF     srcElement

 

 

事件委託　：　

理解 : 給一個對象A設置一個點擊事件,此時這個事件會產生一個事件對象,這個事件對象包含了鼠標事件和鍵盤事件等;這個事件對象有一個屬性 target/srcElement,當點擊A對象內層的對象a時,此事件對象調用上句的屬性時,會返回被點擊的對象a,獲得這個對象後,咱們能夠獲取這個對象a的一些信息.這時的效果就好像是給a對象設置了點擊事件,但其實咱們在代碼中併爲給對象a設置點擊事件,這就是事件委託. 原理上被點擊的對象a把點擊事件委託給了其外層設置有點擊事件的對象