DOM事件

DOM事件的級(jí)別

DOM級(jí)別一共可以分為四個(gè)級(jí)別：DOM0級(jí)、DOM1級(jí)、DOM2級(jí)和DOM3級(jí)。而DOM事件分為3個(gè)級(jí)別：DOM0級(jí)事件處理，DOM2級(jí)事件處理和DOM3級(jí)事件處理

• 1. DOM0 : element.onclick = function(e) {}
• 2. DOM1 ：該標(biāo)準(zhǔn)中未涉及到事件綁定的相關(guān)東西
• 3. DOM2 : element.addEventListener('click', function(e){}, false)， 一個(gè)DOM元素可以添加多個(gè)事件
• 4. DOM3 : element.addEventListener('keyup', function(e){}, false)，在DOM2標(biāo)準(zhǔn)基礎(chǔ)上面增加了新的事件類型：鼠標(biāo)事件，鍵盤事件，焦點(diǎn)事件

DOM事件模型

1. 事件捕獲：從外向內(nèi), window -> document -> body -> button
2. 事件冒泡：從內(nèi)向外，button -> body -> document -> window

DOM事件流

瀏覽器為當(dāng)前的頁面與用戶進(jìn)行交互的過程中，點(diǎn)擊鼠標(biāo)后事件如何傳入和響應(yīng)的呢？

捕獲階段：從外部容器開始向內(nèi)
目標(biāo)階段：事件通過捕獲到達(dá)目標(biāo)階段
冒泡階段：從目標(biāo)元素再上傳到window對(duì)象

事件委托

什么事件可以代理？什么事件不可以代理呢？

• 通常支持事件冒泡（Event Bubbling）的事件類型為鼠標(biāo)事件和鍵盤事件，例如：mouseover, mouseout, click, keydown, keypress。
• 接口事件(指的是那些不一定與用戶操作有關(guān)的事件)則通常不支持事件冒泡（Event Bubbling），例如：load, change, submit, focus, blur。

事件對(duì)象event的屬性方法的差別

自定義事件

• 如何給一個(gè)按鈕綁定一個(gè)自己定義的事件呢？

  // 1. 使用Event對(duì)象來自定義事件
  // 開始創(chuàng)建一個(gè)自己定義的事件對(duì)象
  var eve = new Event('customEvent');
  // 使用dom2事件處理的方式來給這個(gè)元素綁定一個(gè)事件
  var dom = document.documentElement;
  dom.addEventListener('customEvent', function(e) {
    console.log('customEvent called!');
  });
  // 下面的這句話可以在適合的場(chǎng)景中來觸發(fā)一個(gè)自己定義的事件對(duì)象
  setTimeout(function(){
    // 在1s之后觸發(fā)這個(gè)事件
    dom.dispatchEvent(eve);
  }, 1000)


  // 2. 使用CustomEvent來實(shí)現(xiàn)自定義事件
  var dom = document.documentElement;
  // 使用CustomEvent的方式可以在事件觸發(fā)的時(shí)候傳遞一個(gè)參數(shù)，然后通過e.detail 的方式來獲取這個(gè)參數(shù)信息
  var myClick = new CustomEvent('myClick', {detail : {name : 'zhangsan', age : 24}});
  dom.addEventListener('myClick', function(e){
    console.log(e.detail, e.target)
  })
  dom.dispatchEvent(myClick);