Я пытаюсь захватить все JS событий и воспроизвести их:
https://jsfiddle.net/proxymis/b2tdmcoL/7/
Захват в порядке, но событие не отправляется.
Есть идеи?
function startStop() {
if (started) {
end();
} else {
start();
}
}
function playback() {
console.log('playback starting...');
end();
let elapsed = 0;
let index = 0;
let interval = setInterval(function () {
if (history.length <= index) {
console.log('playBackFinished');
clearInterval(interval);
return;
}
elapsed += intervalEvent;
if (elapsed > history[index].elapsed) {
let e = history[index];
window.dispatchEvent(e);
index++;
console.log('dispatch', index, e.type);
}
}, intervalEvent)
}
function eventHandler(event) {
if (started) {
saveEvent(event, intervalEvent);
}
}
function start() {
Object.keys(window).forEach(key => {
if (regex.test(key)) {
window.addEventListener(key.slice(2), eventHandler);
}
});
startedTime = Date.now();
started = true;
}
function end() {
started = false;
Object.keys(window).forEach(key => {
if (regex.test(key)) {
window.removeEventListener(key.slice(2), eventHandler);
}
});
console.log('Size', 'length', history.length);
}
function saveEvent(event, interval = 250) {
let elapsed = 0;
if (history.length) {
let last = history[history.length - 1].time;
elapsed = Date.now() - last;
if (elapsed < interval)
return;
}
let e = event;
e.time = Date.now();
e.elapsed = elapsed;
history.push(e);
}
let started = false;
let startedTime;
let history = [];
let intervalEvent = 10;
let regex = /^on(key|mouse)/;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Save</title>
</head>
<body>
<button id="startStop" onclick="startStop()">Start/Stop</button>
<button id="playback" onclick="playback();">PlayBack</button>
<hr>
<textarea id="textarea1" cols="30" rows="10"></textarea>
<input type="text" id="input1">
<input type="checkbox" name="" id="checkbox1">
<input type="radio" id="radio1">
<button id="ok" onclick="alert('ok')">Alert Ok</button>
<textarea id="textarea12" cols="30" rows="10"></textarea>
<hr>
</body>
</html>
Моя цель - фиксировать нажатия клавиш или щелкать по элементам и воспроизводить их.