什么是事件对象

到底什么是事件对象呢。

事件对象代表事件的状态，事件发生后，跟事件相关的一系列的集合都放到这个对象里面，这个对象就是事件对象，它有很多属性和方法。

我们先用传统获取元素的方法看一下它的使用方法

 var div = document.querySelector('div');
        div.onclick = function(e) {
                console.log(e);
        }

如代码中所示

1. e 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看。

2.事件对象的命名是不固定的，也可以不叫e，但是最好用e或者evt表示，这是规范。

2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数。

4. e是谁触发就指向谁

我们通过点击div，输出一下这个e看一下打印的是什么结果吧。

MouseEvent {isTrusted: true, screenX: 39, screenY: 156, clientX: 39, clientY: 55, …}
altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 39     //鼠标x坐标
clientY: 55     //鼠标的y坐标
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 39
layerY: 55
metaKey: false
movementX: 0
movementY: 0
offsetX: 31
offsetY: 47
pageX: 39
pageY: 55
path: (5) [div, body, html, document, Window]
relatedTarget: null
returnValue: true
screenX: 39
screenY: 156
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: div       //也是返回触发事件的对象，只兼容i6-i8.
target: div          //返回触发事件的对象
timeStamp: 4920.250000000124
toElement: div
type: "click"        //返回事件的类型
view: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
which: 1
x: 39
y: 55
__proto__: MouseEvent

3. 如图所示，输出了很多的属性和方法，开头的英文MouseEvent，意为鼠标事件的意思

4.所以事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键

5.我们设置的是鼠标点击事件onclick，所以就包含了鼠标的相关信息，鼠标坐标等，如图。

我们用新增的获取元素的方式来看一下

div.addEventListener('click', function(e) {
              console.log(e);
           })

方法还是一样的，

事件对象对ie有兼容性问题，2022年6月ie浏览器推出舞台，所以这里就不写适配方案了。