js中的事件，事件對象以及相關的事件操做（事件流，事件監聽，事件委託等）

事件：就是對元素的操做，指用戶在某事務上因爲某種行爲所執行的操做；

函數與事件的關係：全部的事件都會依賴函數執行。

 

事件的三要素：

①事件源：是一個名詞，指在哪一個元素身上引起事件；

②事件：是一個動詞，也就是要執行的那個動做；

③事件處理程序：函數，也就是作完動做後會執行的操做；

eg:
oBth 事件源；onclick 事件；function 事件處理程序；

oBth.onclick = function(){

 

　　　　}

 

事件的種類（只列舉了我經常使用的某些事件）：

①頁面事件：onload  頁面加載事件（頁面打開後執行）；onunload  頁面卸載事件（頁面關閉時執行）

②鼠標事件：onclick  單擊；ondblclick  雙擊；onmousedown  按下；nomouseup  擡起；onmouseover  移入（懸停）；onmouseout  移出；onmouseenter  移入；onmouseleaver  移出；onmousemove  移動；oncontextmenu  右鍵單擊

③鍵盤事件：onkeyup  擡起；onkeydown  按下；onkeypress  按下+擡起

④其餘事件（通常用於表單）：onsubmit  表單提交事件（通常用於表單驗證）；onchange  改變（通常用於下拉列表）；onblur  失去焦點；onfocus  獲取焦點

 

事件應用：

事件源.事件 = function(){

           執行代碼

　　　　　　}    

 

如何操做頁面元素：（DOM中的獲取元素）

操做樣式：頁面元素.style.樣式=值；

操做內容：

　　     ①操做表單：頁面元素.value=值  //屬性操做

　　     ②操做非表單：頁面元素.innerHTML=值

 

操做標籤屬性：如<img src="">

　　頁面元素.屬性=值

 

　　*event：事件對象（有兼容，我會單獨寫一個關於js的兼容的文本）

　　 事件對象，聽名字就知道是在事件中用的，當觸發一個事件的時候，就會產生一個事件對象，不一樣的事件的事件對象不一樣。

　　  event中的屬性和方法較多，所以這裏用我看到的別人寫的一個比較全面的例子：

Event屬性和方法： 1. type：事件的類型，如onlick中的click； 2. srcElement/target：事件源，就是發生事件的元素；

3. button：聲明被按下的鼠標鍵，整數，1表明左鍵，2表明右鍵，4表明中鍵，若是按下多個鍵，酒把這些值加起來，因此3就表明左右鍵同時按下；
（firefox中 0表明左鍵，1表明中間鍵，2表明右鍵） 4. clientX/clientY：事件發生的時候，鼠標相對於瀏覽器窗口可視文檔區域的左上角的位置；(在DOM標準中，這兩個屬性值都不考慮文檔的滾動狀況，
也就是說，不管文檔滾動到哪裏，只要事件發生在窗口左上角，clientX和clientY都是 0，因此在IE中，要想獲得事件發生的座標相對於文檔開頭的位置，要加上
document.body.scrollLeft和 document.body.scrollTop) 5. offsetX,offsetY/layerX,layerY：事件發生的時候，鼠標相對於源元素左上角的位置；

6. x,y/pageX,pageY：檢索相對於父要素鼠標水平座標的整數；

7. altKey,ctrlKey,shiftKey等：返回一個布爾值； 8. keyCode：返回keydown何keyup事件發生的時候按鍵的代碼，以及keypress 事件的Unicode字符；(firefox2不支持 event.keycode，能夠用 event.which替代 ) 9. fromElement,toElement：前者是指代mouseover事件中鼠標移動過的文檔元素，後者指代mouseout事件中鼠標移動到的文檔元素； 10. cancelBubble：一個布爾屬性，把它設置爲true的時候，將中止事件進一步起泡到包容層次的元素；(e.cancelBubble = true; 至關於 e.stopPropagation();) 11. returnValue：一個布爾屬性，設置爲false的時候能夠組織瀏覽器執行默認的事件動做；(e.returnValue = false; 至關於 e.preventDefault();) 12. attachEvent(),detachEvent()/addEventListener(),removeEventListener：爲制定 DOM對象事件類型註冊多個事件處理函數的方法，
它們有兩個參數，第一個是事件類型，第二個是事件處理函數。在
attachEvent()事件執行的時候，this關鍵字指向的是window對象，而不是發生事件的那個元素； 13. screenX、screenY：鼠標指針相對於顯示器左上角的位置，若是你想打開新的窗口，這兩個屬性很重要；

　　  還有一些別的說明，這裏是連接：http://www.cnblogs.com/zxktxj/archive/2012/02/26/2369176.html；想看的能夠了解。

 

事件流

當產生某個事件時，事件從子元素向父元素觸發或從父元素向子元素觸發的過程 稱爲事件流

事件流的兩種模式 ：

    事件冒泡  ---  從子元素向父元素觸發  small ---> big --> body ---> document ---> window

    事件捕獲  ---  從父元素向子元素觸發  window -- > document --- > body --- > big --> small

 

事件冒泡

事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標籤

 

事件綁定  -- 如何爲某個元素添加某個事件

一、<input type='button' onclick = 'fn()'>

二、obj.onclick = function(){  }

三、經過  addEventListener()   綁定事件   ----  事件監聽 

用法 ：obj.addEventListener("事件去掉on",function(){})   

第一個參數  事件  

第二個參數  事件處理程序

第三個參數  布爾值  默認  false   控制事件冒泡仍是事件捕獲    true -- 事件捕獲

 

事件監聽的好處 ：  能夠爲同一個對象添加多個一樣的事件 

                　　　　 能夠根據事件監聽的方法肯定究竟是事件的冒泡仍是事件捕獲 

 

事件冒泡和事件捕獲的執行順序（擴展）

若是一個元素 既有事件冒泡，又有事件捕獲，先執行冒泡？執行捕獲？？

　　先捕獲 後冒泡

 

事件委託

事件委託 ： 又叫事件代理 ，將事件添加到某些元素的父元素或者祖先元素元素上  委託父級或祖先元素完成事件操做

事件委託機制 ：js事件委託，實際上是使用了冒泡的原理，從點擊的元素開始，會向父元素傳播事件

 

這樣作的好處

1.對於大量要處理的元素，沒必要爲每一個元素都綁定事件，只須要在他們的父元素上綁定一次便可，提升性能。

2.能夠處理動態插入dom中的元素，直接綁定的方式是不行的