最近有个需求，需要在页面上面自动点击、输入、提交。

用以模拟真实用户的操作行为，可以通过直接执行某个元素绑定的事件，来执行操作。

也可以创建事件，再派发事件，执行操作。关于事件的更多细节，可以参考《JavaScript中事件处理》

1、模拟MouseEvent中的click事件，x与y位置随机点击

2、模拟TouchEvent中的touchstart和touchmove，用scroll来做滑动效果

3、模拟FocusEvent，聚焦到屏幕中的输入框内

一、鼠标事件MouseEvent

MouseEvent接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：click，dblclick，mouseup，mousedown。

MouseEvent派生自 UIEvent，UIEvent 派生自 Event。

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();

1）Event

语法如下：

typeArg：事件的名字，DOMString类型。

eventInit：

2）UIEvent

语法如下：

有多个事件对象直接或间接的继承了UIEvent，包括：MouseEvent, TouchEvent, FocusEvent, KeyboardEvent, WheelEvent,InputEvent和CompositionEvent。

UIEventInit：

3）MouseEvent

语法如下：

mouseEventInit：

二、触屏事件TouchEvent

TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。

每个Touch对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标元素描述。TouchList对象代表多个触点的一个列表。

触屏touch事件的更多细节，可以参加《触屏touch事件记录》

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);

1）Touch

语法如下：

touchInit：

 2）TouchEvent

语法如下：

touchEventInit：

三、焦点事件FocusEvent

FocusEvent接口表示和焦点相关的事件比如 focus, blur, focusin, 和 focusout。

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();

1）FocusEvent

语法如下：

focusEventInit：

JavaScript实现按键精灵