Dom事件

LZDROID發表於2019-03-10
事件

事件流

事件流描述的是從頁面中接收事件的順序。大家都知道，IE這傢伙就是搞特殊，於是出現了兩個版本，（不可忽視IE所帶來的積極的作用，哈哈）

  • IE的事件冒泡流
  • Netscape的事件捕獲流 實際上，這兩個就是我後來曉得的DOM事件流，在DOM2級事件中，規定了事件流包括了的三個階段，事件捕獲階段，處於目標階段，事件冒泡階段。（雖然DOM2中規定了事件從document開始，但大多數瀏覽器都是從window物件開始捕獲的，還有也規定也要求捕獲階段不會涉及事件目標，但大多數瀏覽器也都在捕獲階段觸發了物件上的事件，結果就是說，有兩個機會在目標物件上面操作事件）-參考JS高階程式設計
    Dom事件
    --圖片來自網路

事件處理程式

  • HTML的事件處理程式，就是將js寫在HTML中
  • DOM0級的事件處理程式 element.click = function(){}
  • DOM2級的事件處理程式 element.addEventListTener('click',function(){},false) 最後一個布林引數代表是否在捕獲階段呼叫事件處理函式，一般為false,就是在冒泡階段呼叫這個事件處理函式IEelement.attachEvent('onclick',function(){}) （DOM2級的好處就是可以新增多個事件處理函式，但是如果想要呼叫removeEventListener來移除之前新增的事件，則需要將函式以函式變數的形式提取出來，只將函式名作為引數傳入）
someFun = function(){}
element.addEventListener('click',someFun,false)
element.removeEventListener('click',someFun,false)
複製程式碼
  • DOM3級就是新添了很多時間，例如Keyup等

event事件物件

上面所說的事件的處理函式中，會有一個預設的event物件

element.click = function(event){
    event.preventDefault() 取消事件的預設行為
    event.stopPropagation() 取消事件的進一步的捕獲或者冒泡
    event.stopImmediatePropagation() 取消事件的進一步的捕獲或者冒，同事阻止任務事件處理程式被呼叫，（就是加入這個元素繫結了兩個處理函式，使用這個會阻止另一個觸發）
    event.currentTarget 事件繫結的那個元素上
    event.target 當前點選的元素，它和上面那個大哥常用於事件委託優化
} 
複製程式碼

自定義事件

var eve = new Event('test')
element.addEventListener('test',function(){})
觸發
element.dispatcher(eve)
複製程式碼

有的時候面試會問Event和CustomEvent的區別，就是後者可以攜帶引數

// create and dispatch the event
var event = new CustomEvent("cat", {
  detail: {
    hazcheeseburger: true
  }
});
// add an appropriate event listener
obj.addEventListener("cat", function(e) {});

obj.dispatchEvent(event);
複製程式碼

相關文章