JavaScript实现按键精灵
最近有个需求，需要在页⾯上⾯⾃动点击、输⼊、提交。
⽤以模拟真实⽤户的操作⾏为，可以通过直接执⾏某个元素绑定的事件，来执⾏操作。
也可以创建事件，再派发事件，执⾏操作。关于事件的更多细节，可以参考《》
1、模拟中的click事件，x与y位置随机点击
2、模拟中的touchstart和touchmove，⽤scroll来做滑动效果
3、模拟，聚焦到屏幕中的输⼊框内
⼀、⿏标事件MouseEvent
接⼝指⽤户与指针设备( 如⿏标 )交互时发⽣的事件。使⽤此接⼝的常见事件包括：click，dblclick，mouseup，mousedown。MouseEvent派⽣⾃，UIEvent 派⽣⾃。
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：事件的名字，类型。
eventInit：
属性选项默认类型描述
bubbles可选false Boolean事件是否冒泡
cancelable可选false Boolean事件是否可取消
scoped可选Boolean indicating whether the given event bubbles. If this value is true, deepPath will only contain a target node.
composed可选false Boolean
事件是否会影⼦根(shadow root)之外触发侦听器。
是指在⽂档（document）渲染时插⼊⼀棵DOM元素⼦树，但是这棵⼦树不在主DOM树中。2）UIEvent
：
有多个事件对象直接或间接的继承了UIEvent，包括：, , , , ，和。
UIEventInit：
属性选项默认类型描述
根据事件不同意义也会不同。
对 click 或者 dblclick 事件, detail是当前点击数量；
detail可选0long长整型对mousedown或者mouseup事件, detail是1加上当前点击数；
对所有的其它UIEvent对象, detail总是0。
view可选null与事件相关联的窗⼝
3）MouseEvent
：
mouseEventInit：
属性选项默认类型描述
⿏标事件发⽣时相对于⽤户屏幕screen的⽔平/垂直坐标位置；
screenX/screenY可选0long长整型
该操作并不会改变真实⿏标的位置。
⿏标事件时相对于浏览器窗⼝viewport的⽔平/垂直坐标位置，不包含滚动距离；
clientX/clientY可选0long长整型
该操作并不会改变真实⿏标的位置。
ctrlKey可选false Boolean按下了Ctrl键
shiftKey可选false Boolean按下了Shift键
altKey可选false Boolean按下了Alt键
metaKey可选false Boolean按下了Meta键
当事件发⽣时哪个按键被按下或释放；
button可选0short短整型
0：左键 1：中建 2：右键
当事件发⽣时哪些按键被按下；
buttons可选0⽆符号short
0：⽆按键按下 1：左键 2：中建 4：右键
标明刚离开的元素 (发⽣在事件 mouseenter 或 mouseover);
relatedTarget可选null
或刚进⼊的元素 (发⽣在事件 mouseout 或 mouseleave)。
region可选null DOMString点击事件影响的区域DOM的id
是⼀类描述⼿指在触摸平⾯（触摸屏、触摸板等）的状态变化的事件。
每个对象代表⼀个触点; 每个触点都由其位置，⼤⼩，形状，压⼒⼤⼩，和⽬标元素描述。对象代表多个触点的⼀个列表。
触屏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() {
blur事件touch();
}, 2000);
1）Touch
：
touchInit：
属性选项默认类型描述
identifier必填long长整型⼀个触摸点的数字标记，唯⼀标识符。
target必填EventTarget触点最开始被跟踪时(在 touchstart 事件中)，位于的HTML元素。
clientX/client
Y 可选0double
触摸点相对于浏览器窗⼝viewport的位置，不包含滚动距离，这个值会根据⽤户对可见视区的
缩放⾏为⽽发⽣变化。
screenX/scre
enY 可选0double
触摸点相对于屏幕screen的位置。在IOS中与clientX/clientY属性不同，不会受到initial-scale的
影响；
⽽在安卓中和UC会受之影响，⽽⼿机版chrome与红⽶note⾃带的浏览器不会被影响。
pageX/pageY可选0double 和clientX/clientY属性不同，这个值是相对于整个html⽂档的坐标，这个值包含了垂直滚动的偏移。
radiusX/radiu
sY
可选0float能够包围⽤户和触摸平⾯的接触⾯的最⼩椭圆的⽔平轴(X轴)/垂直轴(Y轴)半径。rotationAngle可选0float
以度为单位的旋转⾓，由radiusX和radiusY描述的正⽅向的椭圆；
通过顺时针旋转这个⾓度后，能最精确地覆盖住⽤户和触摸平⾯的接触⾯的⾓度。
force可选0float⼿指挤压触摸平⾯的压⼒⼤⼩，从0.0(没有压⼒)到1.0(设备可识别的最⼤压⼒)的浮点数。2）TouchEvent
：
touchEventInit：
属性选项默认类型描述
touches可选[]TouchList类型（包含了⼀系列Touch对象的数组），当前位于屏幕上的所有⼿指的列表。targetTou
ches
可选[]TouchList与touches类似，但是增加了个过滤条件，要与第⼀个⼿指点的地⽅（同⼀个节点内）相同。
changedT ouches 可选[]TouchList
在touchstart中：列出在此次事件中新增加的触点。如果同时放下⼀根或两根⼿指，那么将与
touches相同，但如果先放⼀根，在放第⼆根，那就会不同。
在touchmove中：列出和上⼀次事件相⽐较，发⽣了变化的触点。
在touchend中：列出离开触摸平⾯的触点（这些触点对应已经不接触触摸平⾯的⼿指）。
ctrlKey可选false Boolean按下了Ctrl键shiftKey可选false Boolean按下了Shift键altKey可选false Boolean按下了Alt键metaKey可选false Boolean按下了Meta键
接⼝表⽰和焦点相关的事件⽐如 focus, blur, focusin, 和 focusout。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。