溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發(fā)布時間:2020-10-04 19:01:18 來源:腳本之家 閱讀:352 作者:咖啡機(K.F.J) 欄目:web開發(fā)

最近有個需求,需要在頁面上面自動點擊、輸入、提交。

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

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

1、模擬MouseEvent中的click事件,x與y位置隨機點擊

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

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

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

一、鼠標事件MouseEvent

MouseEvent接口指用戶與指針設備( 如鼠標 )交互時發(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

語法如下:

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

typeArg:事件的名字,DOMString類型。

eventInit:

屬性

選項 默認 類型 描述
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:

屬性

選項 默認 類型 描述
detail 可選 0 long長整型

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

對 click 或者 dblclick 事件, detail是當前點擊數(shù)量;

對mousedown或者mouseup事件, detail是1加上當前點擊數(shù);

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

view 可選 null WindowProxy 與事件相關聯(lián)的窗口

3)MouseEvent

語法如下:

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

mouseEventInit:

屬性

選項 默認 類型 描述
screenX/screenY 可選 0 long長整型

鼠標事件發(fā)生時相對于用戶屏幕screen的水平/垂直坐標位置;

該操作并不會改變真實鼠標的位置。

clientX/clientY 可選 0 long長整型

鼠標事件時相對于瀏覽器窗口viewport的水平/垂直坐標位置,不包含滾動距離;

該操作并不會改變真實鼠標的位置。

ctrlKey 可選 false Boolean 按下了Ctrl鍵
shiftKey 可選 false Boolean 按下了Shift鍵
altKey 可選 false Boolean 按下了Alt鍵
metaKey 可選 false Boolean 按下了Meta鍵 
button 可選 0 short短整型

當事件發(fā)生時哪個按鍵被按下或釋放;

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

buttons 可選 0 無符號short

當事件發(fā)生時哪些按鍵被按下;

0:無按鍵按下 1:左鍵 2:中建 4:右鍵

relatedTarget 可選 null EventTarget

標明剛離開的元素 (發(fā)生在事件 mouseenter 或 mouseover);

或剛進入的元素 (發(fā)生在事件 mouseout 或 mouseleave)。

region 可選 null DOMString 點擊事件影響的區(qū)域DOM的id

二、觸屏事件TouchEvent

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

每個Touch對象代表一個觸點; 每個觸點都由其位置,大小,形狀,壓力大小,和目標元素描述。TouchList對象代表多個觸點的一個列表。

觸屏touch事件的更多細節(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'), //隨便設置的
 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'), //隨便設置的
 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

語法如下:

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

touchInit:

屬性

選項 默認 類型 描述
identifier 必填   long長整型 一個觸摸點的數(shù)字標記,唯一標識符。
target 必填   EventTarget 觸點最開始被跟蹤時(在 touchstart 事件中),位于的HTML元素。
clientX/clientY 可選 0 double 觸摸點相對于瀏覽器窗口viewport的位置,不包含滾動距離,這個值會根據(jù)用戶對可見視區(qū)的縮放行為而發(fā)生變化。
screenX/screenY 可選 0 double

觸摸點相對于屏幕screen的位置。在IOS中與clientX/clientY屬性不同,不會受到initial-scale的影響;

而在安卓中微信和UC會受之影響,而手機版chrome與紅米note自帶的瀏覽器不會被影響。

pageX/pageY 可選 0 double 和clientX/clientY屬性不同,這個值是相對于整個html文檔的坐標,這個值包含了垂直滾動的偏移。
radiusX/radiusY 可選 0 float 能夠包圍用戶和觸摸平面的接觸面的最小橢圓的水平軸(X軸)/垂直軸(Y軸)半徑。
rotationAngle 可選 0 float

以度為單位的旋轉角,由radiusX和radiusY描述的正方向的橢圓;

通過順時針旋轉這個角度后,能最精確地覆蓋住用戶和觸摸平面的接觸面的角度。

force 可選 0 float 手指擠壓觸摸平面的壓力大小,從0.0(沒有壓力)到1.0(設備可識別的最大壓力)的浮點數(shù)。

 2)TouchEvent

語法如下:

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

touchEventInit:

屬性

選項 默認 類型 描述
touches 可選 [] TouchList TouchList類型(包含了一系列Touch對象的數(shù)組),當前位于屏幕上的所有手指的列表。
targetTouches 可選 [] TouchList 與touches類似,但是增加了個過濾條件,要與第一個手指點的地方(同一個節(jié)點內(nèi))相同。
changedTouches 可選 [] TouchList

在touchstart中:列出在此次事件中新增加的觸點。如果同時放下一根或兩根手指,那么將與touches相同,但如果先放一根,在放第二根,那就會不同。

在touchmove中:列出和上一次事件相比較,發(fā)生了變化的觸點。

在touchend中:列出離開觸摸平面的觸點(這些觸點對應已經(jīng)不接觸觸摸平面的手指)。

ctrlKey 可選 false Boolean 按下了Ctrl鍵
shiftKey 可選 false Boolean 按下了Shift鍵
altKey 可選 false Boolean 按下了Alt鍵
metaKey 可選 false Boolean 按下了Meta鍵

三、焦點事件FocusEvent

FocusEvent接口表示和焦點相關的事件比如 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

語法如下:

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

focusEventInit:

屬性

選項 默認 類型 描述 relatedTarget 可選 null EventTarget 輔助FocusEvent目標

源碼查看:

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

以上所述是小編給大家介紹的JavaScript實現(xiàn)按鍵精靈的原理分析,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI