事件对象的使用和认识

先写一个事件来看

<button type="">按钮</button>

var btn = document.querySelector('button');
btn.onclick = function () {
  // Window 顶级对象
  console.log(window);
  // DOM对象 <button type="" onclick="a()">按钮</button>
  console.log(this);
}

       可以看到当我们在事件函数内部直接使用event的时候是可以使用的，即使不申明也是可以的， 也就是说event是window的一个内置对象，那既然是window下的对象，那是不是也可以在别的地方直接使用呢？

我们写一个任意function

function a () {
  // window对象
  console.log(window);
  // window对象
  console.log(this);
  // undefined
  console.log(event);
}
a();

       从上图可以看到这个时候event的值是undefined

所以问题来了， 既然event是window下的一个对象，为什么现在却找不到值了呢？

       实验了很多次，也查了很多网上的资料，也问了很多身边的大佬

最后我有了一个自己的总结：只有是事件触发的时候调用这个函数，此时函数内部的window.event才会有值，如果当你直接调用函数的时候，window.event是没有值的。

关于事件对象的一点小发现

       事件对象的使用时需要在事件函数写一个形参的，那时候我一直认为这个形参必须要写，情景如下

<button type="">按钮</button>

var btn = document.querySelector('button');
btn.onclick = function (event) {
  console.log(event);
}

前段时间天真的认为不传这个形参函数内部是不能使用event的，直到一天自己写错的时候发现。。。

总结

1. 一个事件函数的调用，函数发生的本质是事件触发去调用，此时事件对象可以直接在函数内部使用。
2. 一个普通的函数，直接去调用，window.evnet的值是undefined
3. 事件函数不用写形参那里的值，函数内部也可以直接使用 event.任何属性（原生js）

这是我真正接触前端的第三个月，我发现我还是很喜欢去研究一些东西的，上文是我一点平时的小总结，如果有错误的地方，请大家指教。