526互联

JS事件

发布时间 2023-03-25 23:54:22作者: 转角90

事件处理三种方案

  • 元素上
  • 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)

事件委托

鼠标事件

常见鼠标事件

mouseover与mouseenter的区别

  • mouseover 进入子元素时,将事件冒泡给父元素
    • 先调用父元素的mouseout，
    • 再调用子元素的mouseover
    • 因为支持冒泡，所以会将mouseover传递给父元素中
  • mouseenter 进入子元素时，没有任何反应，因为子元素依旧属于父元素

键盘事件

  • onkeydown：事件先发生

  • onkeypress: 文本被输入时

  • onkeyup：文本输入完成

  • event.code: 按键代码

  • key: 字符

    document.onkeyup = funciton(event){
    console.log(event.code)
}

表单事件

表单事件

文档加载事件

  • window.onload: 图片+样式+DOM加载完成时
  • addEventListener('DOMContentLoaded'): 文档加载完，不会等待图片或外部资源加载完

window定时器

  • setTimeout： 延迟执行
  • setInterval: 重复执行
  • clearTimeout
  • clearInterval