# 事件对象从何而来

目前我还没有完全的弄懂这个问题，但是已经解决了我目前的疑惑，还有很多没有学完，所以我现在也不能完全的去深究这个问题的原理

# 我的问题

视频里面，有这样一个做法

1
2
3

li.onlick = f('click', function (e) {
    alert(e.type);
});

对此我感到疑惑，这个 e 是从哪里来的，视频说是我们给的一个形参，可是前面也没有出现过这个形参，没有这个形参的时候设置事件绑定也用的好好的，还有就是这个事件对象和 onclick , onmouseover 这些是什么关系

整理一下 :

这个 e 怎么就可以直接拿来用了，它的性质是什么
事件对象和 onclick , onmouseover 之类的关系

# 解决问题

# 第一个问题

首先 typeof 一下看看性质
1
2
3
ul.onclick = function (e) {
console.log(typeof e);
}
显示object, 没什么太大帮助
直接打印 e 试试
1
2
3
ul.onclick = function (e) {
console.log(e);
}
发现是PointerEvent类型的, 里面参数有很多
方法不是有一个伪数组 arguments 来管理吗，试试看这个 arguments 里面有没有这个参数
1
2
3
ul.onclick = function (e) {
console.log(arguments[0] === e);
}
说明两个是完全相等的
没有参数的时候呢
1
2
3
ul.onclick = function () {
console.log(arguments[0] === event);
}
也是相同的, 说明这个参数就是event这个东西, 而我没有参数, arguments也能接收到参数, 根据判断, 应该是模板函数之类的 —>猜测 —>function(PointEvent=event)

到现在，差不多就验证完了，应该是模板函数，即我写的这个函数继承于那个模板函数，或者是传参进去了，所以即使没有参数，也可以用 event 这个字段，并且效果完全相同

进 onlick 看了一下，发现就是传参

这里的第一个参数就是 onclick 所在的接口 (实现此接口的 DOM 对象本身), 但是第二个参数，就是我们所使用的 event

我们再进 addEventListener 看一下

这里应该是分为了 list 的 add 方法和单个元素的 add 方法

大概也是传参来的

# 第二个问题

接下来就到了第二个问题，这个 onlick , onmouseover 之类的，和这个 event , 即事件对象的关系是什么呢

onclick 此类为 DOM 对象中的一个属性，对其赋值可以为函数，也可以为值，如果为函数的话，我们写的函数体大部分以箭头函数的形式封装