用JavaScript实现密钥向导的原理分析

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

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

您还可以创建事件、调度事件和执行操作。有关活动的更多详情，请参考《JavaScript中事件处理》

1.在MouseEvent中模拟点击事件，在x和y位置随机点击

2.在TouchEvent中模拟touchstart和touchmove，并使用滚动来实现滑动效果

3.模拟聚焦事件并聚焦在屏幕上的输入框上

1.MouseEvent

MouseEvent接口是指当用户与定点设备(如鼠标)交互时发生的事件。使用此界面的常见事件包括：单击、dblclick、mouseup、mousedown。

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

函数random(max){ return math . floor(math . random()* max)；}函数on(dom，type，fn) { dom.addEventListener(type，fn，false)；} on (document.body，' click '，function(e){ console . log(' click event x : ' e . client x，' y : ' e . client y)；});/** * MouseEvent *包括click、dblclick、mouseup、mouse down */function mouse(){ var x=random(window . outer width)，y=random(window . outer height)；var event=new MouseEvent('click '，{ bubbles: true，cancelable: true，view: window，clientX: x，client y :y })；console . log(' click environment x : ' x，' y : ' y)；document.body.dispatchEvent(事件)；} mouse()；1)事件

语法如下：

TypeArg:事件的名称，属于DOMString类型。

事件初始化：

属性

选项默认类型描述气泡可选假布尔事件是否冒泡可取消可选假布尔事件是否限定范围可选布尔指示给定事件何时冒泡。如果该值为真，深度路径将只包含一个目标节点。composed可选false布尔事件是否会触发影子根外的侦听器。

影子DOM是指在渲染文档时插入DOM元素的子树，但这个子树不在主DOM树中。

2)UIEvent

语法如下：

直接或间接继承UIEvent的事件对象有很多，包括鼠标事件、触摸事件、焦点事件、键盘事件、滚轮事件、输入事件和CompositionEvent。

UIEventInit:

属性

选项默认类型描述细节可选0长整型长整型会根据不同的事件有不同的含义。

对于click或dblclick事件，detail是当前的单击次数；

对于mousedown或mouseup事件，细节是1加上当前的点击次数；

对于所有其他UIEvent对象，细节始终为0。

查看与事件相关联的可选空窗口代理窗口3)MouseEvent

语法如下：

mouseEventInit:

属性

选项默认类型描述screenX/screenY可选的0长鼠标事件相对于用户屏幕屏幕的水平/垂直坐标位置；

这个操作不会改变真实鼠标的位置。

ClientX/clientY可以在选择0长鼠标事件时，选择相对于浏览器窗口视口的水平/垂直坐标位置，不包括滚动距离；

这个操作不会改变真实鼠标的位置。

CtrlKey可选假布尔ctrl键可选假布尔shift键可选假布尔alt键可选假布尔alt键可选假布尔meta键可选假布尔meta键可选假布尔meta键按钮事件发生时可选0短短整数；

0:左键1:中建2:右键

按钮可以选择0无符号短，当事件发生时按下哪个按钮；

0:无按键按下1:左键2:中建4:右键

相关目标可选空事件目标标明刚离开的元素（发生在事件鼠标输入或鼠标悬停);

或刚进入的元素（发生在事件鼠标移出或老鼠叶).

地区可选空DOMString点击事件影响的区域数字正射影像图的编号二、触屏事件触摸事件

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

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

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

on(document.body，' touch start '，function(e){ var touch=e . touch。项目(0)；控制台。日志('触摸开始x : '触摸。client x ' y : ' touch。客户关系)；});on(document.body，' touchmove '，function(e){ var touch=e . touch。项目(0)；控制台。日志('触摸移动x : '触摸。client x ' y : ' touch。客户关系)；});on(document.body，' touchend '，function(e){ var touch=e . changed touch。项目(0)；控制台。log('触摸结束x : '触摸。client x ' y : ' touch。客户关系)；});打开(窗口，“滚动”，功能(e){控制台。日志('滚动时间戳p : ' e . timestamp)；});/** *触摸事件*包括事件touchstart、touchend、touchmove、Touch cancel */功能Touch start(x，y，number){ var Touch=new Touch({标识符：编号，目标：文档。queryselector ').拖动'),//随便设置的clientX: x，client y :y })；console.log('touchstart环境x:' x，' y : ' y)；var事件=新的触摸事件(' touch start '，{ touch :[touch]，targettouch :[touch]，changed touche :[touch])；document.body.dispatchEvent(事件);//触摸开始}函数touchmove(x，y，间隔，数字){ var Touch=new Touch({标识符：号，目标：文档。queryselector ').拖动'),//随便设置的clientX: x，client :y间隔});var事件=新的触摸事件(' touch move '，{ touch :[touch]，targettouch :[touch]，changed touche :[touch])；document.body.dispatchEvent(事件);//触摸移动}函数touch() { var x=random(窗口。外套宽度)，y=随机(窗口。外套高度)，number=1，interval=10touchstart(x，y，number)；数量；touchmove(x，y，间隔，数字);数量；区间=10;touchmove(x，y，间隔，数字);数量；区间=10;touchmove(x，y，间隔，数字);文件。尸体。滚动顶部=间隔；//自动滚动} setTimeout(function(){ touch()；}, 2000);1)触摸

语法如下：

触摸初始化：

属性

选项默认类型描述标识符必填长的长整型一个触摸点的数字标记，唯一标识符目标。必填事件目标触点最开始被跟踪时（在touchstart事件中),位于的超文本标记语言元素客户端x/客户端y可选0双倍触摸点相对于浏览器窗口视口的位置，不包含滚动距离，这个值会根据用户对可见视区的缩放行为而发生变化screenX/screenY可选0双倍触摸点相对于屏幕屏幕的位置。在IOS中与客户x/客户y属性不同，不会受到初始规模的影响；

而在安卓中微信和大学学院会受之影响，而手机版铬与红米注意自带的浏览器不会被影响。

页面x/页面y可选0双倍和客户x/客户y属性不同，这个值是相对于整个超文本标记语言文档的坐标，这个值包含了垂直滚动的偏移radiusX/radiusY可选0浮动能够包围用户和触摸平面的接触面的最小椭圆的水平轴（十轴)/垂直轴(Y轴)半径旋转角度可选0浮动以度为单位的旋转角，由radiusX和半径y描述的正方向的椭圆；

通过顺时针旋转该角度，可以最准确地覆盖用户和触摸平面之间的接触面的角度。

力可以选择0浮指按压触摸平面的压力，从0.0(无压力)到1.0(设备识别的最大压力)。2)触摸事件

语法如下：

touchEventInit:

属性

选项默认类型描述触摸可选[]触摸列表触摸列表类型(包含一系列触摸对象的数组)，屏幕上当前所有手指的列表。targetToucheses的可选[] TouchList类似于touch，但有额外的过滤条件，这应该与第一个手指指向的地方(在同一节点内)相同。已更改的touch可选[] TouchList在touchstart中：列出此事件中新添加的联系人。如果你同时放下一两个手指，就和触摸一样，但是如果你先放一个手指，再放第二个手指，就不一样了。

在touchmove中：列出与上一个事件相比发生了变化的联系人。

在touchend中：列出离开触摸平面的触点(这些触点对应于未触摸触摸平面的手指)。

CtrlKey可选假布尔ctrl键可选假布尔shift键可选假布尔alt键可选假布尔alt键可选假布尔meta键可选假布尔meta键第三，FocusEvent焦点事件

FocusEvent界面表示与焦点相关的事件，如聚焦、模糊、聚焦输入和聚焦输出。

on(document . getelementbyid(' txt ')，' focus '，function(e){//console . log(e)；console . log(' focus timestamp : ' e . TiMer)；});/** * FocusEvent *包括事件focus、fuzzy、focus in、focus out */function focus(){ var event=new focus event(' focus '，{ view : window })；document.getElementById('txt ')。dispatchEvent(事件)；}焦点()；1)聚焦事件

语法如下：

聚焦通风单元：

属性

选项默认类型描述相关目标可选空事件目标辅助焦点事件目标

源代码视图：

http://codepen.io/strick/pen/xgNGbz

以上是边肖介绍的JavaScript实现按钮向导的原理分析，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！