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

快捷導(dǎo)航

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

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

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

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

用以模擬真實(shí)用戶的操作行為，可以通過直接執(zhí)行某個元素綁定的事件，來執(zhí)行操作。

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

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

2、模擬TouchEvent中的touchstart和touchmove，用scroll來做滑動效果

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

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

MouseEvent接口指用戶與指針設(shè)備( 如鼠標(biāo) )交互時發(fā)生的事件。使用此接口的常見事件包括：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

語法如下：

typeArg：事件的名字，DOMString類型。

eventInit：

屬性	選項(xiàng)	默認(rèn)	類型	描述
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)之外觸發(fā)偵聽器。 Shadow DOM是指在文檔（document）渲染時插入一棵DOM元素子樹，但是這棵子樹不在主DOM樹中。

2）UIEvent

語法如下：

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

UIEventInit：

屬性

選項(xiàng)

默認(rèn)

類型

描述

detail

可選

0

long長整型

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

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

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

對所有的其它UIEvent對象, detail總是0。

view

可選

null

WindowProxy

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

3）MouseEvent

語法如下：

mouseEventInit：

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

二、觸屏事件TouchEvent

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

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

觸屏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; //自動滾動
}
setTimeout(function() {
 touch();
}, 2000);

1）Touch

語法如下：

touchInit：

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

2）TouchEvent

語法如下：

touchEventInit：

屬性	選項(xiàng)	默認(rèn)	類型	描述
touches	可選	[]	TouchList	TouchList類型（包含了一系列Touch對象的數(shù)組），當(dāng)前位于屏幕上的所有手指的列表。
targetTouches	可選	[]	TouchList	與touches類似，但是增加了個過濾條件，要與第一個手指點(diǎn)的地方（同一個節(jié)點(diǎn)內(nèi)）相同。
changedTouches	可選	[]	TouchList	在touchstart中：列出在此次事件中新增加的觸點(diǎn)。如果同時放下一根或兩根手指，那么將與touches相同，但如果先放一根，在放第二根，那就會不同。在touchmove中：列出和上一次事件相比較，發(fā)生了變化的觸點(diǎn)。在touchend中：列出離開觸摸平面的觸點(diǎn)（這些觸點(diǎn)對應(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

語法如下：