EventTarget介紹

EventTarget是一個DOM接口,由可以接收事件並且可以創建偵聽器的對象實現
Element,document,window是最常見的event target,但其他對象如XMLHttpRequest等

構造函數

創建一個新的EventTarget對象實例

class T extends EventTarget {
  constructor(name){
    super()
    this._name = name
  }
  get name(){
    return this._name
  }
}
let t = new T('zhangsan')
console.log(t.name)  // zhangsan
t.addEventListener('good',function(e){
  // 接口CustomEvent的只讀屬性detail 返回在初始化事件對象時傳遞過來的任何類型數據
  this._name = e.detail
})
// CustomEvent創建一個自定義事件
let e = new CustomEvent('good',{detail:'lisi'})
t.dispatchEvent(e)
console.log(t.name)  // lisi

方法

EventTarget提供了三個實例方法:

• EventTarget.addEventListener()
• EventTarget.removeEventListener()
• EventTarget.dispatchEvent()

EventTarget.addEventListener()

語法:

EventTarget.addEventListener(type, listener, useCapture)

該方法接收三個參數:

• type 事件名稱,大小寫敏感
• listener 監聽函數
• useCapture 布爾類型,監聽函數是否在d捕獲階段觸發(默認爲false)

我們以前給元素添加事件的時候,很多時候使用的是onEvent的方法,我們先來看下面的例子:

<button id="btn1">click me</button>

let btn1 = document.querySelector('#btn1')
btn1.onclick = function(){
  console.log('first')
}
btn1.onclick = function(){
  console.log('second')
}

如果給同一個元素綁定了兩次,則後面的會覆蓋前面的.點擊按鈕控制檯只會打印出second.
而我們用addEventListener來看下效果

let btn1 = document.querySelector('#btn1')
btn1.addEventListener('click',function(){
  console.log(1)
})
function log2(){
  console.log(2)
}
btn1.addEventListener('click',log2)

此時我們點擊按鈕,控制檯會打印出1和2,
addEventListener的第二個參數,也可以是一個具有handleEvent方法的對象,下面的代碼打印出handleEvent

let btn1 = document.querySelector('#btn1')
btn1.addEventListener('click',{
  handleEvent:function(){
    console.log('handleEvent')
  }
})

addEventListener的第三個參數,也可以是一個屬性配置對象.假如只希望事件監聽函數只執行一次,可以設置once屬性爲true

let btn1 = document.querySelector('#btn1')
btn1.addEventListener('click',{
  handleEvent:function(){
    console.log('handleEvent')
  }
},{once:true})

addEventListener方法可以爲一個對象添加多個不同的監聽函數,若添加了多次同個監聽函數也只會執行一次

let btn1 = document.querySelector('#btn1')
function log(){
  console.log('log')
}
btn1.addEventListener('click',() => {
  console.log(1)
})
btn1.addEventListener('click',() => {
  console.log(2)
})
btn1.addEventListener('click',log)
btn1.addEventListener('click',log)

若要向監聽函數傳參,則可以使用匿名函數包裝監聽函數

let btn1 = document.querySelector('#btn1')
function log(t){
  console.log(t)
}
btn1.addEventListener('click',function(){
  log(1)
})

EventTarget.removeEventListener()

語法:

EventTarget.removeEventListener(type, listener, useCapture)

removeEventListener可以刪除使用EventTarget.addEventListener()方法添加的事件

let btn1 = document.querySelector('#btn1')
function log(){
  console.log(1)
}
function log2(){
  console.log(2)
}
btn1.addEventListener('click',log)
btn1.addEventListener('click',log2)
btn1.removeEventListener('click',log2)

上面的代碼只會打印出1,因爲log2事件已經被刪除了

EventTarget.dispatchEvent()

語法:

target.dispatchEvent(event)

• target 觸發目標
• event 要被派發的事件對象,是一個Event對象的實例

<button id="btn1">按鈕1</button>
<button id="btn2">按鈕2</button>

let btn1 = document.querySelector('#btn1')
let btn2 = document.querySelector('#btn2')
btn1.addEventListener('click',function(){
  console.log('btn1')
})
btn2.onclick = function(){
  btn1.dispatchEvent(new Event('click'))
}