DOM Event模型

DOM Event模型

参考链接https://developer.mozilla.org/zh-CN/docs/Web/API/Event

Event` 接口表示在 DOM 中发生的任何事件; 一些是用户生成的（例如鼠标或键盘事件），而其他由 API 生成（例如指示动画已经完成运行的事件，视频已被暂停等等）。事件通常由外部源触发，同样也会以编程方式触发，事件本身包含所有事件通用的属性和方法。

一个完整的事件系统，通常存在以下三个角色：

• 事件对象，用于储存事件的状态。
• 事件源对象，当前事件在操作的对象，如元素节点，文档对象，window对象，XMLHttpRequest对象等。
• 事件监听器，当一个事件源生成一个事件对象时，它会调用相应的回调函数进行操作。在IE中，事件对象恒为全局属性window.event的分身。

完整的事件流过程

1、一个完整的事件流是从window开始，最后回到window的一个过程。

2、事件流被分为三个阶段(红色)捕获过程、（蓝色)目标过程、(绿色)冒泡过程。

捕获过程:自上而下

冒泡过程：自下而上

注册事件监听器

有三种方式可以为DOM元素注册事件处理函数。

（1）EventTarget.addEventListener

//示例
//假设myButton是一个button,false表示是否为捕获阶段，默认为false
myButton.addEventListener('click',function(){
   alert('Hello World');},