JS 事件

客戶端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('你好')">

缺點:  調用函數時,函數可能爲被解析,會報錯; htmljs 混合,耦合度高,不利於維護。

 

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 也可以爲一個元素添加多個事件處理程序。

:逆序觸發。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章