JavaScript实现按键精灵的原理分析

function random(max) {
 return Math.floor(Math.random() * max);
}
function on(dom, type, fn) {
 dom.addEventListener(type, fn, false);
}
on(document.body, 'click', function(e) {
 console.log('click事件 x:'+e.clientX, 'y:'+e.clientY);
});
/**
 * MouseEvent
 * 包括事件 click，dblclick，mouseup，mousedown
 */
function mouse() {
 var x = random(window.outerWidth),
  y = random(window.outerHeight);
 var event = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window,
  clientX: x,
  clientY: y
 });
 console.log('click环境 x:'+x, 'y:'+y);
 document.body.dispatchEvent(event);
}
mouse();

on(document.body, 'touchstart', function(e) {
 var touch = e.touches.item(0);
 console.log('touchstart x:' + touch.clientX, 'y:' + touch.clientY);
});
on(document.body, 'touchmove', function(e) {
 var touch = e.touches.item(0);
 console.log('touchmove x:' + touch.clientX, 'y:' + touch.clientY);
});
on(document.body, 'touchend', function(e) {
 var touch = e.changedTouches.item(0);
 console.log('touchend x:' + touch.clientX, 'y:' + touch.clientY);
});
on(window, 'scroll', function(e) {
 console.log('scroll timestamp:' + e.timeStamp);
});
/**
 * TouchEvent
 * 包括事件 touchstart，touchend，touchmove，touchcancel
 */
function touchstart(x, y, number) {
 var touch = new Touch({
 identifier: number,
 target: document.querySelector('.drag'), //随便设置的
 clientX: x,
 clientY: y
 });
 console.log('touchstart环境 x:' + x, 'y:' + y);
 var event = new TouchEvent('touchstart', {
 touches: [touch],
 targetTouches: [touch],
 changedTouches: [touch]
 });
 document.body.dispatchEvent(event); //touchstart
}
function touchmove(x, y, interval, number) {
 var touch = new Touch({
 identifier: number,
 target: document.querySelector('.drag'), //随便设置的
 clientX: x,
 clientY: y + interval
 });
 var event = new TouchEvent('touchmove', {
 touches: [touch],
 targetTouches: [touch],
 changedTouches: [touch]
 });
 document.body.dispatchEvent(event); //touchmove
}
function touch() {
 var x = random(window.outerWidth),
 y = random(window.outerHeight),
 number = 1,
 interval = 10;
 touchstart(x, y, number);
 number++;
 touchmove(x, y, interval, number);
 number++;
 interval += 10;
 touchmove(x, y, interval, number);
 number++;
 interval += 10;
 touchmove(x, y, interval, number);
 document.body.scrollTop = interval; //自动滚动
}
setTimeout(function() {
 touch();
}, 2000);

on(document.getElementById('txt'), 'focus', function(e) {
 //console.log(e);
 console.log('focus timestamp:' + e.timeStamp);
});
/**
 * FocusEvent
 * 包括事件 focus, blur, focusin, focusout
 */
function focus() {
 var event = new FocusEvent('focus', {
 view: window
 });
 document.getElementById('txt').dispatchEvent(event);
}
focus();