JavaScript中如何在函数间传递与获取event事件对象

• 先明确addEventListener的固定运行规则：DOM事件触发时，浏览器会自动把生成的事件对象作为第一个参数，传入你当初注册给对应事件的那个回调函数，这个规则不会因为你在外层套了包装函数发生变化。
• 顺着代码执行流程拆解，逻辑就非常清晰：
  1. 代码执行到MyInput.addEventListener('input',checkActivity(MyFunc))时，checkActivity(MyFunc)会立刻同步执行，它的返回值是你定义的那个带...args形参的箭头函数——这个被return出来的新函数，才是真正注册给浏览器、等事件触发时会被调用的回调，外层的checkActivity、内部的MyFunc都没有直接绑定到事件上。
  2. 当输入框触发input事件时，浏览器按规则把event对象作为实参传给这个注册好的箭头函数。此时箭头函数里的...args是ES6的剩余参数语法，作用是把当前函数收到的所有实参收集成一个数组，所以你打印args时，看到的数组第一个元素就是浏览器传进来的event对象，这就是剩余参数能拿到event的核心原因。
• 你当前写的代码有个容易踩的小坑：f1(args)是把整个收集参数得到的数组传给了MyFunc，这时候MyFunc里接收到的e是[event]结构的数组，不是原生事件对象。如果要让MyFunc直接拿到正确的event，只需要把调用写法改成f1(...args)，把收集到的参数按原顺序透传给内部函数即可。

内容的提问来源于stack exchange，提问作者EscFox