JavaScript實現按鍵精靈

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

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

也可以創建事件，再派發事件，執行操作。關于事件的更多細節，可以參考《JavaScript中事件處理》

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

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

3、模擬FocusEvent，聚焦到屏幕中的輸入框內

?

一、鼠標事件MouseEvent

MouseEvent接口指用戶與指針設備( 如鼠標 )交互時發生的事件。使用此接口的常見事件包括：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環境 x:'+x, 'y:'+y);document.body.dispatchEvent(event); } mouse();

1）Event

語法如下：

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)之外觸發偵聽器。 Shadow DOM是指在文檔（document）渲染時插入一棵DOM元素子樹，但是這棵子樹不在主DOM樹中。

2）UIEvent

語法如下：

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

UIEventInit：

屬性	選項	默認	類型	描述
detail	可選	0	long長整型	根據事件不同意義也會不同。 對 click 或者 dblclick 事件, detail是當前點擊數量； 對mousedown或者mouseup事件, detail是1加上當前點擊數； 對所有的其它UIEvent對象, detail總是0。
view	可選	null	WindowProxy	與事件相關聯的窗口

3）MouseEvent

語法如下：

mouseEventInit：

屬性	選項	默認	類型	描述
screenX/screenY	可選	0	long長整型	鼠標事件發生時相對于用戶屏幕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短整型	當事件發生時哪個按鍵被按下或釋放； 0：左鍵 1：中建 2：右鍵
buttons	可選	0	無符號short	當事件發生時哪些按鍵被按下； 0：無按鍵按下 1：左鍵 2：中建 4：右鍵
relatedTarget	可選	null	EventTarget	標明剛離開的元素 (發生在事件 mouseenter 或 mouseover); 或剛進入的元素 (發生在事件 mouseout 或 mouseleave)。
region	可選	null	DOMString	點擊事件影響的區域DOM的id

?

二、觸屏事件TouchEvent

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

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

觸屏touch事件的更多細節，可以參加《觸屏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環境 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

語法如下：

touchInit：

屬性	選項	默認	類型	描述
identifier	必填	?	long長整型	一個觸摸點的數字標記，唯一標識符。
target	必填	?	EventTarget	觸點最開始被跟蹤時(在 touchstart 事件中)，位于的HTML元素。
clientX/clientY	可選	0	double	觸摸點相對于瀏覽器窗口viewport的位置，不包含滾動距離，這個值會根據用戶對可見視區的縮放行為而發生變化。
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(設備可識別的最大壓力)的浮點數。

?2）TouchEvent

語法如下：

touchEventInit：

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

語法如下：

focusEventInit：

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

?

源碼查看：

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

?

參考資料：

事件類型一覽表

Comparison of Event Targets?

神奇的Shadow DOM?

WindowProxy and Window objects??

Inner and outer windows?

?

本文轉自 咖啡機（K.F.J） 博客園博客，原文鏈接：http://www.cnblogs.com/strick/p/6409463.html?? ，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的JavaScript实现按键精灵的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。