前端之家收集整理的这篇文章主要介绍了
JavaScript实现按键精灵的原理分析，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
最近有个需求，需要在页面上面自动点击、输入、提交。
用以模拟真实用户的操作行为，可以通过直接执行某个元素绑定的事件，来执行操作。
也可以创建事件，再派发事件，执行操作。关于事件的更多细节，可以参考《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
语法如下：
mouseEventInit：
属性
用户屏幕screen的水平/垂直坐标位置；
MetaKeyMeta键
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
语法如下：
touchEventInit：
属性
增加了个过滤条件，要与第一个手指点的地方（同一个节点内）相同。增加的触点。如果同时放下一根或两根手指，那么将与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
语法如下：
focusEventInit：
属性
|
|
|
以上所述是小编给大家介绍的JavaScript实现按键精灵的原理分析。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/js/41442.html
|
