Javascript中的事件对象

1、事件对象

在DOM中发生事件时，所有相关信息都会被收集并存储在一个名为event的对象中。这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型、可能与特定事件相关的任何其他数据等。

2、 DOM事件对象

在DOM合规的浏览器中，event对象是传给事件处理程序的唯一参数。不管以DOM0还是DOM2指定事件处理程序，都会传入这个event对象。

DOM事件对象的属性和方法

• currentTarget：当前事件处理程序所在的元素；target：事件目标
  **在事件处理程序内部，this对象始终等于currentTarget的值，而target只包含事件的实际目标。**如果事件处理程序直接添加到意图的目标，则this、currentTarget和target的值是一样的。如：

let btn = document.getElementById('oBtn')
btn.onclick = function(event) {
  console.log(this === event.currentTarget) // true
  console.log(this === event.target) // true
}

如果click事件的目标不是按钮，而是按钮的父节点，它们的值就不一样了。如：

document.body.onclick = function(event) {
  console.log(this === event.currentTarget) // true
  console.log(this === event.target) // false
}

点击按钮后，由于click事件注册在document.body上，在事件冒泡机制下，this和currentTarget的值都是document.body，而target的值指向了按钮本身，这才是click事件的真正目标。

• type：被触发的事件类型

let btn = document.getElementById('oBtn')
btn.onclick = function(event) {
  console.log(event.type) // click
}

• preventDefault()：阻止特定事件的默认动作。如，链接的默认行为就是在被单击时导航到href属性指定的URL。如果想阻止这个导航行为，可以在onclick事件处理程序中取消，如：

let link = document.getElementById('link')
link.onclick = function(event) {
  event.preventDefault()
}

• stopPropagation()：立即阻止事件流在DOM结构中传播，取消后续的事件捕获或冒泡。例如，直接添加到按钮的事件处理程序中调用该方法可以阻止document.body上注册的事件处理程序：

let btn = document.getElementById('oBtn')
btn.onclick = function(event) {
  console.log(event.type) // click
  event.stopPropagation()
}
document.body.onclick = function (event) {
  console.log('document.body') // 点击按钮不输出
}

3、IE事件对象

与DOM事件对象不同，IE事件对象可以基于事件处理程序被指定的方式以不同方式来访问。如果事件处理程序是使用DOM0方式指定的，则event对象只是window对象的一个属性。如：

let btn = document.getElementById('oBtn')
btn.onclick = function(event) {
  console.log(event === window.event) // true
}

如果事件处理程序是使用attachEvent()指定的，则event对象会作为唯一的参数传给处理函数：

let btn = document.getElementById('oBtn')
btn.attachEvent('onclick', function(event) {
  console.log(event.type) // click
})

如果是使用HTML属性方式指定的事件处理程序，则event对象同样可通过变量event访问：

<button id="oBtn" onclick="console.log(event.type)">click</button>

IE事件对象的属性和方法

• srcElement：事件目标，与DOM的target属性相同。由于事件处理程序的作用域取决于指定它的方式，this的值并不总是等于事件目标：

let btn = document.getElementById('oBtn')
btn.onclick = function() {
  console.log(window.event.srcElement === this) // true
}
btn.attachEvent('onclick', function(event) {
  console.log(event.srcElement === this) // false
})

在第一个以DOM0方式指定的事件处理程序中，srcElement属性等于this，而在第二个事件处理程序中，它运行在全局作用域中，两个值不等。

• returnValue：等价于DOM的preventDefault()方法，当把值设置为false时是用于取消给定事件默认的行为。

let link = document.getElementById('link')
link.onclick = function(event) {
  event.returnValue = false
}

• cancelBubble：用途与DOM的stopPropagation()一样，用于阻止事件冒泡，因为IE8及更早版本的不支持捕获阶段，所以只会取消冒泡。stopPropagation()既能取消捕获也能取消冒泡。

let btn = document.getElementById('oBtn')
btn.onclick = function() {
  window.event.cancelBubble = true
}
document.body.onclick = function() {
  console.log('body clicked') // 点击按钮不输出
}

4、跨浏览器事件对象

DOM和IE事件对象虽有不同，但足够的相似性为跨浏览器实现提供了方案。可在EventUtil对象中编写以下方法：

let EventUtil = {
  getEvent: function(event) {
    return event ? event : window.event
  },
  getTarget: function(event) {
    return event.target || target.srcElement
  },
  preventDefault: function(event) {
    if (event.preventDefault){
      event.preventDefault()
    }else {
      event.returnValue = false
    }
  },
  stopPropagation: function(event) {
    if(event.stopPropagation){
      event.stopPropagation()
    }else {
      event.cancelBubble = true
    }
  }
}