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

前端之家收集整理的这篇文章主要介绍了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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章