JavaScript事件 | 青训营笔记

LuciaZzzz
90 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第6天

JavaScript事件

EventTarget接口

DOM节点的监听和出发都定义在这个接口。主要提供了三个实例方法：

  • addEventListener（）
  • removeEventListener（）
  • dispatchEvent（）

addEventListener（）

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

useCapture可选，默认为false，如果为true自然代表监听函数listener将在捕获阶段被触发。 还可以是once：如果为true，表示监听函数在执行一次之后会自动移除。passive：如果为true，表示进制监听函数调用preventDefault（）方法。signal:为监听器设置一个信号通道，在需要的时候发出信号，移除监听函数。

removeEventListener（）

用来移除addEbentListener（）的监听函数，没有返回值。

dispatchEvent（）

在当前节点上触发指定事件

监听函数内部的this指向触发事件的那个元素节点。

事件的传播

分为三个阶段：

  1. 从window对象传到目标节点（上层到底层），称为捕获阶段（capture phase）
  2. 在目标节点上触发，成为目标阶段（target phase）
  3. 从目标节点返回window对象（底层到上层）， 称为冒泡阶段（bubbling phase）

事件的代理

可以把子节点的监听函数定义在父节点上，由父节点统一处理多个子节点的事件。

Event对象

  • bubbles，eventPhase
  • cancelable，cancelBubble，defaultPrevented
  • currentTarget， target
  • type
  • timeStamp：表示事件发生的时间。
  • isTrusted：表示该事件是否由真实的用户行为产生。

preventDefault（） stopImmediatePropagation() composedPath():返回一个数组，是事件最底层节点和依次冒泡经过的所有上层结点。

鼠标事件

鼠标事件的种类

点击事件：
  • click：mousedown-mouseup-click
  • dbclick：mousedown-mouseup-click-dbclick
  • mousedown：按下鼠标时触发。
  • mouseup：释放按下的鼠标时触发。
移动事件
  • mousemove
  • mouseenter
  • mouseover
  • mouseout
  • mouseleave
其他事件
  • contextmenu：按下鼠标右键触发
  • wheel：滚轮触发

MouseEvent的实例属性

  • altkey，atrlkey，shiftkey，metakey（win或者command）：判断事件发生的时候有没有按下对应的键
  • button，butttons：表示事件发生的时候按下了鼠标的哪个键。
  • clientX，clientY：返回鼠标位置相对于浏览器窗口左上角的水平座标和垂直坐标。也可以用.x .y
  • movementX,movementY:返回当前位置与上一个mousemove事件的水平和垂直距离。
  • screenX，screenY：返回鼠标位置相对于屏幕左上角的水平和垂直坐标。
  • offsetX，offxetY：返回鼠标位置与目标节点左侧的padding边缘的水平和垂直距离
  • pageX，pageY：返回鼠标位置二号文档左侧的距离
  • relatedTarget：返回事件的相关节点。
  • getModifierState（）：表示有没有按下特定的功能键。

WheelEvent的实例属性

拥有Event和MouseEvent的实例属性和方法，另外还有以下属性

  • deltaX，deltaY，deltaZ：表示滚轮的水平垂直z轴滚动量。
  • deltaMode：表示上三个属性的单位，像素，行或者页

键盘事件

  • keydown
  • keyup
  • keypress

KeyboardEvent的实例属性

  • altkey，atrlkey，shiftkey，metakey（win或者command）：判断事件发生的时候有没有按下对应的键
  • code：表示当前按下的键的字符串形式
  • key：表示按下的键名
  • location：表示按下的键处在键盘的哪个区域
  • repeat： 表示该键是否被按着不放
  • getModifierState（）：表示是否激活或者按下功能键。

进度事件

用来描述资源加载的进度，提供了ProgressEvent（）接口

表单事件

  • input事件：继承了InputEvent接口
  • select事件：选中文本时触发
  • change事件
  • invalid事件：表单的元素不满足校验条件时触发
  • reset，submit事件

InoutEvent接口

  • data
  • inputType
  • dataTransfer

触摸事件

  • touchstart
  • touchend
  • touchmove
  • touchcancel

Touch接口

  • identifier 表示触摸点的唯一ID
  • screenX，screenY， clientX， clientY， pageX， pageY
  • radiusX， radiusY
  • force
  • target

TouchList接口

表示一系列触摸点的集合

  • length
  • item（）

TouchEvent接口

  • altKey，ctrlKey， shiftKey， metaKey
  • changedTouches： 返回TouchList，和本次有关的触摸点
  • touches： 返回TouchList,表示仍在触摸中的点
  • targetTouches：返回目标节点中多有仍在活动中的触摸点

拖拉事件

draggable可以用于任何元素节点，但是img和链接（a)不加这个属性也是默认true的，因此会将其设为false防止拖拉

  • drag
  • dragstart
  • dragend
  • dragenter
  • dragover
  • dragleave
  • drop

DataTransfer的实例属性

  • dropEffect：设置放下被拖拉节点时的效果。
  • effectAllowed：设置本次拖拉中被允许的效果
  • files：可以用来在拖拉中传送文件
  • types：返回拖拉的数据格式
  • items：返回拖拉的成员

DataTransfer的实例方法

  • setData（）
  • getData（）：接受一个数据类型作为参数，返回该数据参数指定类型的数据
  • clearData（）：删除指定类型的数据
  • setDragImage（）：浏览器会显示一张随鼠标一起移动的图片。

其他事件

  • 资源事件
  • session事件
  • 网页状态事件
  • 窗口事件
  • 剪贴板事件
  • 焦点事件
  • CustomEvent接口
avatar
文章
阅读
粉丝