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

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

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

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

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

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

一、鼠标事件MouseEvent

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

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

包括事件 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：

属性

是指在文档（document）渲染时插入一棵DOM元素子树，但是这棵子树不在主DOM树中。

2）UIEvent

语法如下：

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

UIEventInit：

3）MouseEvent

语法如下：

@H_404_63@

mouseEventInit：

属性

用户屏幕screen的水平/垂直坐标位置；

MetaKeyMeta键

404_89@SEOver);

SEOut 或 mouseleave)。

二、触屏事件TouchEvent

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

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

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

包括事件 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,interval,clientY: y + interval }); var event = new TouchEvent('touchmove',changedTouches: [touch] }); document.body.dispatchEvent(event); //touchmove } function touch() { var x = random(window.outerWidth),y = random(window.outerHeight),number = 1,interval = 10; touchstart(x,number); number++; touchmove(x,number); number++; interval += 10; touchmove(x,number); document.body.scrollTop = interval; //自动滚动 } setTimeout(function() { touch(); },2000);

1）Touch

语法如下：

touchInit：

属性

标记，唯一标识符。用户对可见视区的缩放行为而发生变化。属性不同，不会受到initial-scale的影响；

自带的浏览器不会被影响。

属性不同，这个值是相对于整个html文档的坐标，这个值包含了垂直滚动的偏移。用户和触摸平面的接触面的最小椭圆的水平轴(X轴)/垂直轴(Y轴)半径。

用户和触摸平面的接触面的角度。

2）TouchEvent

语法如下：

@H_403_144@

touchEventInit：

属性

404_89@增加了个过滤条件，要与第一个手指点的地方（同一个节点内）相同。增加的触点。如果同时放下一根或两根手指，那么将与touches相同，但如果先放一根，在放第二根，那就会不同。

MetaKeyMeta键

三、焦点事件FocusEvent

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

包括事件 focus,focusout */ function focus() { var event = new FocusEvent('focus',{ view: window }); document.getElementById('txt').dispatchEvent(event); } focus();

1）FocusEvent

语法如下：