事件对象——event

问题由来

经常在阅读代码时候发现这样的函数

var btn = document.getElementById('btn');
btn.onclick = function (e) {
    ...一些操作；
}
$("#btn").on('click',function(event){
    ...一些操作；
});
//参数e有时候也会写作event，这个参数究竟是什么？

问题解释

实际上这个东西叫做 事件对象，关于它的定义：

在触发DOM上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。

所有的浏览器都支持event对象但是不同的浏览器下的表现是不同的，没错，分为IE和其他两种...

1.DOM中的event

event对象的部分属性和方法

属性/方法	说明
currentTarget	正在处理事件的元素
target	事件的目标（触发事件的元素）
preventDefault()	取消事件的默认行为
stopPropagation()	取消事件的进一步捕获或冒泡
type	被触发的事件类型

需要注意的是currentTarget和target属性,如果触发事件的元素就是绑定了DOM事件的元素的话，它们就是一致的，但是在某些情况下，它们并不一样。

例如：
**html**
<button id='body'>点击body</button>

**js**
var body = document.getElementsByTagName('body')[0];
body.onclick = function(e){
  console.log(e.target.tagName,e.currentTarget.tagName)
}
>"BUTTON" "BODY"
//触发事件的是Button元素，处理事件的是Body元素

2.IE中的event

同样的，IE中的event对象也有一些属性和方法,这里特指<=IE8以下的只支持事件捕获的浏览器版本。

属性/方法	说明
cancelBubble	布尔值，默认为false,设置为true可以取消事件冒泡
returnValue	布尔值，默认为true，设置为false取消事件默认行为
srcElement	事件的目标（触发事件的元素）
type	被触发的事件类型