客戶端javascript程序採用了異步事件驅動編程模式。
事件就是Web瀏覽器通知應用程序發生了什麼事情。
事件類型是一個用來說明發生了什麼類型事件的字符串。
事件目標是發生的事件或與之相關的對象。
事件對象是與特定事件相關且包含有關該事件詳細信息的對象。
事件傳播是瀏覽器決定哪個對象觸發其事件處理程序的過程。事件傳播的另一種形式是事件捕獲,IE8及之前版本不支持事件捕獲。
事件類型
傳統事件類型
表單事件 submit/reset/focus/blur
Window事件load/unload/focus/blur/resize/scroll
鼠標事件 mousemove/mousedown/mouseup/mouseover/mouseoutIE中不冒泡版本mouseseenter/mouseleave
鍵盤事件 keydown/keyup/keypress
DOM事件
HTML5事件 拖放API 定義了dragstart/drag/dragend/dragenter/dragover/dragleave/drop
觸摸屏和移動設備事件
事件處理程序
爲事件指定處理程序有多種方式:
1、 HTML事件處理程序。
2、 DOM0級事件處理程序。
3、 DOM2級事件處理程序。
4、 IE事件處理程序。
5、 跨瀏覽器事件處理程序。
HTML事件處理程序: 將事件處理程序寫在html標籤中。
例如:<inputtype="button" value='提交' onclick="alert('你好')">
缺點: 調用函數時,函數可能爲被解析,會報錯; html與js 混合,耦合度高,不利於維護。
DOM0級事件處理程序:DOM0級事件處理程序被認爲是元素的方法。換句話說,它是在元素的作用域內運行的,所以this引用當前元素。(該事件處理程序會在事件流的冒泡階段被處理)。 想刪除指定事件處理程序,將其屬性值設爲null就好了。
例如:
var oBtn =document.getElementById('sub');
oBtn. function(){
alert('NBTeam');
}
DOM2級事件處理程序: DOM2級事件定義了兩個方法,用於指定和刪除事件處理程序。分別爲addEventListener() 和 removeEventListener.所有DOM節點都包含着兩個方法。
三個參數: 要處理的事件名,處理函數,布爾值。True: 在捕獲階段處理程序 false: 在冒泡階段處理程序。
優點: 可同時爲一個元素添加多個事件處理程序。
舉例:
oBtn.addEventListener('click',function(){
alert('N');
},false);
oBtn.addEventListener('click',function(){
alert('B'); },false);
IE事件處理程序: IE中對應的添加和刪除函數爲,attachEvent()和 detachEvent();他們接收兩個參數,事件處理名和事件處理函數。由於IE只支持事件冒泡,所以通過attachEvent添加的事件處理函數都會被添加到冒泡階段。
注:IE在使用attachEvent方法的情況下,事件處理程序的作用域爲全局作用域。
attachEvent 也可以爲一個元素添加多個事件處理程序。
注:逆序觸發。