Sources → Event Listener Breakpoints

Sources → Event Listener Breakpoints 里常见事件和监听写法整理出来。

事件监听断点分类表

分类	常见事件	监听示例
触控	touchstart、touchmove、touchend、touchcancel	el.addEventListener('touchstart', fn)
窗口	resize、scroll、zoom	window.addEventListener('scroll', fn)
地理位置	deviceorientationabsolute	window.addEventListener('deviceorientationabsolute', fn)
动画	animationstart、animationend、animationiteration	el.addEventListener('animationend', fn)
画布	Canvas 相关	通常看 Canvas API，不是标准 DOM 事件
画中画	enterpictureinpicture、leavepictureinpicture	video.addEventListener('enterpictureinpicture', fn)
计时器	setTimeout、setInterval	不是 DOM 事件，断点看 Sources 或 Console
加载	load、DOMContentLoaded、unload、beforeunload、error、hashchange、popstate	window.addEventListener('load', fn)
剪贴板	copy、cut、paste、beforecopy、beforecut、beforepaste	document.addEventListener('copy', fn)
键盘	keydown、keyup、keypress	document.addEventListener('keydown', fn)
脚本	脚本执行相关	通常用行断点或 debugger
控制	focus、blur、select、change、submit、reset	input.addEventListener('focus', fn)
媒体	play、pause、ended、timeupdate、volumechange、waiting	video.addEventListener('play', fn)
设备	deviceorientation、devicemotion	window.addEventListener('deviceorientation', fn)
鼠标	click、dblclick、mousedown、mouseup、mouseover、mouseout、mousemove、mouseenter、mouseleave、contextmenu	btn.addEventListener('click', fn)
通知	notificationclick 等	notification.addEventListener('notificationclick', fn)
拖/放	drag、dragstart、dragend、dragenter、dragover、dragleave、drop	el.addEventListener('drop', fn)
指针	pointerdown、pointermove、pointerup、pointerover、pointerout	el.addEventListener('pointerdown', fn)
DOM 变化	DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMAttrModified	el.addEventListener('DOMSubtreeModified', fn)

 

// 普通监听 element.addEventListener('事件名', 回调函数);

// 捕获阶段监听 element.addEventListener('事件名', 回调函数, true);

// 只触发一次 element.addEventListener('事件名', 回调函数, { once: true });

// 被动监听，提升滚动性能 element.addEventListener('touchstart', 回调函数, { passive: true });