1使用场景
有下面一个开发场景：需要使用enter键对input提交200次，然后把提交后返回的结果存起来，供后续分析。例如在百度首页输入文字，然后按回车。
总的方案有两种：
- 1.手动往input中输入200个不同的case，随之点击提交200次。
- 2.写一个程序，自动处理，自己去接一杯水的时间搞定。
很清楚能看出，第二个方式要好的多，只是大家可能很少遇到这种case，所以也每怎么想过程序自动处理怎么办。 往input中加入数据不难， 只要获取到input，然后给 value赋值，就能做到。
重点在于怎么能够自动触发提交。
这里就用到了 Event。
2我们熟悉的Event
Event对象我们经常用到，通常是在事件触发时，比如在对某个元素执行click时， 将event传入，然后我们获取其中的 e.target, e.currentTarget, e.stopPropagation这些。
比如:
<div>
<p onclick="tagClicked(event)" id="tagP">测试数据</p>
</div>
<script>
function tagClicked(e) {
e.stopPropagation();
console.log(e.target)
}
</script>
3我们可能不太熟悉的Event
那么我们深入的想一下，这个Event对象到底是什么， 它是怎么来的。这对我们的知识储备大有益处。
事件(Event) 是一些操作发生时，底层机制穿出来的数据，给开发者以操作空间，让开发者有机会介入进来进行一些处理。
Event会通过哪些行为产生呢？
大概有以下几类：
- 1.用户触发的， 比如上面例子中， 我们点击的时候触发出来的。
- 2.底层API向外跑出来的。比如视频开始、暂停时都会为我们抛出事件。
- 3.通过脚本触发。
本节关注的是第三种情况--- 通过脚本触发
4通过脚本触发事件
上面的那个例子， 我们也可以不真正点击，而是通过js触发，比如：
document.getElementById('tagP').click();
这种情况比较简单。
回到开篇的例子, 用简单代码实现:
<div>
<input type="text" vlaue="" id="user" placeholder="输入名称" onkeydown="keydownClick(event)">
</div>
<script>
function keydownClick(e) {
if(+e.key === 13) {
console.log(123445556);
}
}
</script>
解释一下： 上面的代码是别人实现的， 我们只能获取到input。 而目标就是往input中添加200次数据，并执行200次 keydownClick函数， 而不用自己真正按下200次回车键。
4.1 如何自动触发onkeydown事件
我们在代码中使用的时候，已经是实例化过的event, 其实是有个构造函数 Event, 通过它，结合 dispathEvent，能够实现。
// 实现一：
function trigger() {
var ele = document.getElementById('user');
var event = new Event('keydown', {"bubbles":true, "cancelable":false});
event.key = 13;
ele.value = 1234;
ele.dispatchEvent(event);
}
trigger();
event对象上有很多属性， 大家可以在控制台详细看。
同时， 有许多不同类型的事件，其中一些使用基于 Event 主接口的二次接口。Event 本身包含适用于所有事件的属性和方法。
其中就有与键盘事件相关的 KeyboardEvent,它是个构造函数， 我们可以实例化它
function trigger() {
var ele = document.getElementById('user');
var event = new KeyboardEvent('keydown', {
key: 13
});
ele.value = 1234;
ele.dispatchEvent(event);
}
这样， 可以更直观的触发。
可以仔细看具体的文档，这篇小文当做抛砖引玉的引子， 有兴趣可以详细看MDN上的文档。
