事件模型的詳解

這次帶給大家事件模型的詳解，使用事件的詳解的注意事項有哪些，下面就是實戰案例，一起來看一下。

IE事件模型（沒有捕獲）（<＝ie8）

1. attachEvent(event, function)
   detachEvent(event, function)
   第一個參數為on+'event';

2. 目標物件event.srcElement;

3. this會指向window;

4. event.cancelBubble = true   // 停止冒泡
   event.returnValue = false    //  阻止預設事件

標準DOM事件模型（擷取、目標、冒泡）(>ie8)

1. 
   
   
   

2. 
   
   
   
   

3. #addEventListener(event, function, useCapture)

   removeEventListener(event, function, useCapture)

   useCapture為true，在捕獲階段執行，從外到內觸發；
useCapture為false，在冒泡階段執行（預設），從裡到外觸發；

4. 
   

   event.target和event.
current
5. Target

   target在事件流的目標階段（指向觸發事件監聽的對象）；currentTarget在事件流的捕獲，目標及冒泡階段（指向添加事件監聽的對象）；只有當事件流處在目標階段的時候，兩個的指向才是一樣的；

   而當處於捕捉和冒泡階段的時候，target指向被點擊的物件而currentTarget指向當前事件活動的物件（一般為父級）。

this指向事件監聽物件；

event.stopPropagation()  //  停止冒泡event.preventDefault()    //阻止預設事件

event.stopImmediatePropagation()，阻止剩餘的事件處理函數執行並且防止事件冒泡到DOM樹上，這個方法不接受任何參數;

自訂事件######

var event = new Event('自定义事件');// Listen for the event.elem.addEventListener('自定义事件', function (e) { ... }, false);// Dispatch the event.elem.dispatchEvent(event);
CustomEvent 接口可以为 event 对象添加更多的数据；detail属性可用于传递自定义数据：var event = new CustomEvent('自定义事件', { 'detail': elem.dataset.time });
下面的代码允许你在事件监听器中访问更多的数据：function eventHandler(e) {
  log('The time is: ' + e.detail);
}

####我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網## #其它###相關文章！ ######建議閱讀：#########event loop如何使用#############JavaSript事件冒泡與事件擷取如何實作 ####################JavaSript事件冒泡與事件擷取如何實作 ######

以上是事件模型的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！