腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

JavaScript實(shí)現(xiàn)按鍵精靈的原理分析

更新時(shí)間：2017年02月21日 10:19:20 作者：咖啡機(jī)（K.F.J）

這篇文章主要介紹了JavaScript實(shí)現(xiàn)按鍵精靈的原理分析,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

最近有個(gè)需求，需要在頁(yè)面上面自動(dòng)點(diǎn)擊、輸入、提交。

用以模擬真實(shí)用戶(hù)的操作行為，可以通過(guò)直接執(zhí)行某個(gè)元素綁定的事件，來(lái)執(zhí)行操作。

也可以創(chuàng)建事件，再派發(fā)事件，執(zhí)行操作。關(guān)于事件的更多細(xì)節(jié)，可以參考《JavaScript中事件處理》

1、模擬MouseEvent中的click事件，x與y位置隨機(jī)點(diǎn)擊

2、模擬TouchEvent中的touchstart和touchmove，用scroll來(lái)做滑動(dòng)效果

3、模擬FocusEvent，聚焦到屏幕中的輸入框內(nèi)

一、鼠標(biāo)事件MouseEvent

MouseEvent接口指用戶(hù)與指針設(shè)備( 如鼠標(biāo) )交互時(shí)發(fā)生的事件。使用此接口的常見(jiàn)事件包括：click，dblclick，mouseup，mousedown。

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

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環(huán)境 x:'+x, 'y:'+y);
 document.body.dispatchEvent(event);
}
mouse();

1）Event

語(yǔ)法如下：

typeArg：事件的名字，DOMString類(lèi)型。

eventInit：

屬性	選項(xiàng)	默認(rèn)	類(lèi)型	描述
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	事件是否會(huì)影子根(shadow root)之外觸發(fā)偵聽(tīng)器。 Shadow DOM是指在文檔（document）渲染時(shí)插入一棵DOM元素子樹(shù)，但是這棵子樹(shù)不在主DOM樹(shù)中。

2）UIEvent

語(yǔ)法如下：

有多個(gè)事件對(duì)象直接或間接的繼承了UIEvent，包括：MouseEvent, TouchEvent, FocusEvent, KeyboardEvent, WheelEvent, InputEvent和CompositionEvent。

UIEventInit：

屬性

選項(xiàng)

默認(rèn)

類(lèi)型

描述

detail

可選

0

long長(zhǎng)整型

根據(jù)事件不同意義也會(huì)不同。

對(duì) click 或者 dblclick 事件, detail是當(dāng)前點(diǎn)擊數(shù)量；

對(duì)mousedown或者mouseup事件, detail是1加上當(dāng)前點(diǎn)擊數(shù)；

對(duì)所有的其它UIEvent對(duì)象, detail總是0。

view

可選

null

WindowProxy

與事件相關(guān)聯(lián)的窗口

3）MouseEvent

語(yǔ)法如下：

mouseEventInit：

屬性	選項(xiàng)	默認(rèn)	類(lèi)型	描述
screenX/screenY	可選	0	long長(zhǎng)整型	鼠標(biāo)事件發(fā)生時(shí)相對(duì)于用戶(hù)屏幕screen的水平/垂直坐標(biāo)位置；該操作并不會(huì)改變真實(shí)鼠標(biāo)的位置。
clientX/clientY	可選	0	long長(zhǎng)整型	鼠標(biāo)事件時(shí)相對(duì)于瀏覽器窗口viewport的水平/垂直坐標(biāo)位置，不包含滾動(dòng)距離；該操作并不會(huì)改變真實(shí)鼠標(biāo)的位置。
ctrlKey	可選	false	Boolean	按下了Ctrl鍵
shiftKey	可選	false	Boolean	按下了Shift鍵
altKey	可選	false	Boolean	按下了Alt鍵
metaKey	可選	false	Boolean	按下了Meta鍵
button	可選	0	short短整型	當(dāng)事件發(fā)生時(shí)哪個(gè)按鍵被按下或釋放； 0：左鍵 1：中建 2：右鍵
buttons	可選	0	無(wú)符號(hào)short	當(dāng)事件發(fā)生時(shí)哪些按鍵被按下； 0：無(wú)按鍵按下 1：左鍵 2：中建 4：右鍵
relatedTarget	可選	null	EventTarget	標(biāo)明剛離開(kāi)的元素 (發(fā)生在事件 mouseenter 或 mouseover); 或剛進(jìn)入的元素 (發(fā)生在事件 mouseout 或 mouseleave)。
region	可選	null	DOMString	點(diǎn)擊事件影響的區(qū)域DOM的id

二、觸屏事件TouchEvent

TouchEvent是一類(lèi)描述手指在觸摸平面（觸摸屏、觸摸板等）的狀態(tài)變化的事件。

每個(gè)Touch對(duì)象代表一個(gè)觸點(diǎn); 每個(gè)觸點(diǎn)都由其位置，大小，形狀，壓力大小，和目標(biāo)元素描述。TouchList對(duì)象代表多個(gè)觸點(diǎn)的一個(gè)列表。

觸屏touch事件的更多細(xì)節(jié)，可以參加《觸屏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'), //隨便設(shè)置的
 clientX: x,
 clientY: y
 });
 console.log('touchstart環(huán)境 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'), //隨便設(shè)置的
 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; //自動(dòng)滾動(dòng)
}
setTimeout(function() {
 touch();
}, 2000);

1）Touch

語(yǔ)法如下：

touchInit：

屬性	選項(xiàng)	默認(rèn)	類(lèi)型	描述
identifier	必填		long長(zhǎng)整型	一個(gè)觸摸點(diǎn)的數(shù)字標(biāo)記，唯一標(biāo)識(shí)符。
target	必填		EventTarget	觸點(diǎn)最開(kāi)始被跟蹤時(shí)(在 touchstart 事件中)，位于的HTML元素。
clientX/clientY	可選	0	double	觸摸點(diǎn)相對(duì)于瀏覽器窗口viewport的位置，不包含滾動(dòng)距離，這個(gè)值會(huì)根據(jù)用戶(hù)對(duì)可見(jiàn)視區(qū)的縮放行為而發(fā)生變化。
screenX/screenY	可選	0	double	觸摸點(diǎn)相對(duì)于屏幕screen的位置。在IOS中與clientX/clientY屬性不同，不會(huì)受到initial-scale的影響；而在安卓中微信和UC會(huì)受之影響，而手機(jī)版chrome與紅米note自帶的瀏覽器不會(huì)被影響。
pageX/pageY	可選	0	double	和clientX/clientY屬性不同，這個(gè)值是相對(duì)于整個(gè)html文檔的坐標(biāo)，這個(gè)值包含了垂直滾動(dòng)的偏移。
radiusX/radiusY	可選	0	float	能夠包圍用戶(hù)和觸摸平面的接觸面的最小橢圓的水平軸(X軸)/垂直軸(Y軸)半徑。
rotationAngle	可選	0	float	以度為單位的旋轉(zhuǎn)角，由radiusX和radiusY描述的正方向的橢圓；通過(guò)順時(shí)針旋轉(zhuǎn)這個(gè)角度后，能最精確地覆蓋住用戶(hù)和觸摸平面的接觸面的角度。
force	可選	0	float	手指擠壓觸摸平面的壓力大小，從0.0(沒(méi)有壓力)到1.0(設(shè)備可識(shí)別的最大壓力)的浮點(diǎn)數(shù)。

2）TouchEvent

語(yǔ)法如下：

touchEventInit：

屬性	選項(xiàng)	默認(rèn)	類(lèi)型	描述
touches	可選	[]	TouchList	TouchList類(lèi)型（包含了一系列Touch對(duì)象的數(shù)組），當(dāng)前位于屏幕上的所有手指的列表。
targetTouches	可選	[]	TouchList	與touches類(lèi)似，但是增加了個(gè)過(guò)濾條件，要與第一個(gè)手指點(diǎn)的地方（同一個(gè)節(jié)點(diǎn)內(nèi)）相同。
changedTouches	可選	[]	TouchList	在touchstart中：列出在此次事件中新增加的觸點(diǎn)。如果同時(shí)放下一根或兩根手指，那么將與touches相同，但如果先放一根，在放第二根，那就會(huì)不同。在touchmove中：列出和上一次事件相比較，發(fā)生了變化的觸點(diǎn)。在touchend中：列出離開(kāi)觸摸平面的觸點(diǎn)（這些觸點(diǎn)對(duì)應(yīng)已經(jīng)不接觸觸摸平面的手指）。
ctrlKey	可選	false	Boolean	按下了Ctrl鍵
shiftKey	可選	false	Boolean	按下了Shift鍵
altKey	可選	false	Boolean	按下了Alt鍵
metaKey	可選	false	Boolean	按下了Meta鍵

三、焦點(diǎn)事件FocusEvent

FocusEvent接口表示和焦點(diǎn)相關(guān)的事件比如 focus, blur, focusin, 和 focusout。

on(document.getElementById('txt'), 'focus', function(e) {
 //console.log(e);
 console.log('focus timestamp:' + e.timeStamp);
});
/**
 * FocusEvent
 * 包括事件 focus, blur, focusin, focusout
 */
function focus() {
 var event = new FocusEvent('focus', {
 view: window
 });
 document.getElementById('txt').dispatchEvent(event);
}
focus();

1）FocusEvent

語(yǔ)法如下：