每天一点，学习JavaScript【事件】

1.EventTarget接口

1.1 概 述

DOM的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest AudioNode AudioContext ）也部署了这个接口。
该接口主要提供三个实例方法

• addEventListener: 绑定事件的监听函数
• removeEventListener: 移除事件的监听函数
• dispatchEvent: 触发事件

1.2 EventTarget.addEventListener()

target.addEventListener(type,listener[,useCapture])

listener[,useCapture] 表示listener,useCapyure或者listener。[]符号表示非必须
该方法接收三个参数

• type: 事件名称，大小写敏感
• listener: 监听函数。事件发生时，会调用该监听函数

• useCapture

  • 1.capture:布尔值，表示监听函数是否在捕获阶段（capture）触发，默认为false。
  • 2.once:布尔值，表示监听函数是否只触发一次，然后就自动移除 默认{once:false}。
  • 3.passive:布尔值，表示监听函数不会调用事件的(preventDefault)方法，如果今天函数调用了，浏览器会输出警告⚠️，但不是错误

1.3 EventTarget.removeEventListener()

手动移除addEventListener方法添加的事件监听函数。该方法没有返回值，且附加的三个参数必须和要被移除的addEventListener参数一模一样.即removeEventListener方法移除的监听函数，必须是addEventListener方法添加的那个监听函数，而且必须在同一元素节点，否砸无效

1.4 EventTarget.dispatchEvent()

代替人工的手动触发，使用脚本进行触发事件。该方法返回一个布尔值，只要有一个监听函数调用了Event.preventDefault()(阻止默认事件)，则返回false，否则为true

事件模型

• 监听函数

  • HTML的on-属性
  • 元素节点的事件属性 el.onclick=function(){}

• this的指向

  • 函数内部this指向当前元素节点

• 事件的传播

  • 第一阶段：从window对象传导到目标节点（上层传到底层），称为“捕获阶段”（capture phase）
  • 第二阶段：从目标节点上触发，成为“目标阶段”（target phase）
  • 第三阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）

        
点击