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');},