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'))
}