web页面录屏实现

window.addEventListener('input', this.onFormInput, true); onFormInput = (event) => { const target = event.target; if ( target && target.__flow && ['select', 'textarea', 'input'].includes(target.tagName.toLowerCase()) ) { this.records.push({ type: 'input', target: target.__flow.id, value: target.value, }); } }

在window上使用捕获来捕获事件，后面也是这样处理的，这样做的原因是我们是可能并经常在冒泡阶段阻止冒泡来实现一些功能，所以使用捕获可以减少事件丢失，另外，像scroll事件是不会冒泡的，必须使用捕获。

onchange事件监听

MDN文档： https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput

input事件没法满足type为checkbox和radio的监控，所以需要借助onchange事件来监控

window.addEventListener('change', this.onFormChange, true); onFormChange = (event) => { const target = event.target; if (target && target.__flow) { if ( target.tagName.toLowerCase() === 'input' && ['checkbox', 'radio'].includes(target.getAttribute('type')) ) { this.records.push({ type: 'checked', target: target.__flow.id, checked: target.checked, }); } } }

onfocus事件监听

MDN文档： https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onfocus

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!