事件处理三种方案

• 元素上
• el.onclick
• window.addEventListener(fn)

事件流

• 事件冒泡：默认情况下事件是从最内层往外传递的顺序，这个顺序就称为事件冒泡
• 事件捕获：从外层到内层，称为事件捕获。
• 事件流都监听
  • 捕获阶段：1
  • 目标阶段：2
  • 冒泡阶段：3

/*
eventPhase 获取当前事件流阶段
el.addEventListener(function(){},true) true表示捕获，默认是冒泡
*/

事件对象event

• 属性

  • type: 事件的类型

  • target： 当前事件发生的元素

  • currentTarget： 当前处理事件的元素

  • eventPhase : 事件所处的阶段

  • offsetX,offsetY: 事件发生在元素内的位置

  • clientX,clientY: 事件发生在客户端内的位置

  • pageX,pageY: 事件发生在客户端相对于document的位置

  • screenX,screenY: 事件发生相对于屏幕的位置

    /*
    event.target与event.currentTarget区别
    <div><span></span></div>
    div是当前处理的元素
    span是事件发生的元素，会通过冒泡传递
    */
    

• 方法

  • event.preventDefault(): 阻止默认行为
  • event.stopPropagation: 阻止事件传递

事件中的this

this指向event.target。谁调用了事件，谁就是this

EventTarget类

• 所有的节点和元素都继承自EventTarget

• window也继承自EventTarget;

• EventTarget是一个DOM接口，主要用于添加、删除、派发Event事件；

• 常见方法：

  • addEventListener

  • removeEventListener

  • dispatchEvent: 派发某个事件类型到EventTarget上

    window.dispatchEvent(new Event('coder'))
    window.addEventListener('coder',fn)
    

事件委托

鼠标事件