搜尋
首頁web前端js教程淺談Javascript事件模擬

事件是用來描述網頁中某一特定有趣時刻的,眾所周知事件通常是在由使用者和瀏覽器進行互動時觸發,其實不然,透過Javascript可以在任何時間觸發特定的事件,並且這些事件與瀏覽器建立的事件是相同的。這意味著會有適當的事件冒泡,並且瀏覽器會執行指派的事件處理程序。這種能力在測試web應用程式的時候,是非常有用的,在DOM 3級規範中提供了方法來模擬特定的事件,IE9 chrome FF Opera 和Safari都支持這樣的方式,在IE8及以前的辦法的IE瀏覽器有他自己的方式來模擬事件。

淺談Javascript事件模擬

Javascript事件模擬

#a)Dom 事件模擬
可以透過document上的createEvent()方法,在任何時候創建事件對象,此方法只接受一個參數,既要創建事件對象的事件字符串,在DOM2 級規範上所有的字符串都是複數形式,在DOM 3級事件上所有的字串都採用單數形式,所有的字串如下:
  UIEvents:通用的UI 事件,滑鼠事件鍵盤事件都是繼承自UI事件,在DOM 3 層級上使用的是UIEvent。
  MouseEvents:通用的滑鼠事件,在DOM 3 級上使用的是 MouseEvent。
  MutationEvents:通用的突變事件,在DOM 3 等級使用的是 MutationEvent。
  HTMLEvents:通用的HTML事件,在DOM3級上還沒有等效的。
注意,ie9是唯一支援DOM3級鍵盤事件的瀏覽器,但其他瀏覽器也提供了其他可用的方法來模擬鍵盤事件。
一旦創建了一個事件對象,就要初始化這個事件的相關信息,每一種類型的事件都有特定的方法來初始化,在創建完事件對象之後,通過dispatchEvent()方法將事件應用到特定的dom節點上,以便其支援該事件。這個dispatchEvent()事件,支援一個參數,就是你所建立的event物件。

相關推薦:《JavaScript基礎教學
b)滑鼠事件模擬
  滑鼠事件可以透過建立滑鼠事件物件來模擬(mouse event object),並且授予他一些相關信息,創建一個滑鼠事件通過傳給createEvent()方法一個字符串“MouseEvents”,來創建滑鼠事件對象,之後通過iniMouseEvent()方法初始化返回的事件對象,iniMouseEvent( )方法接受15參數,參數如下:
  type string類型:要觸發的事件類型,例如'click'。
  bubbles Boolean類型:表示事件是否應該冒泡,針對滑鼠事件模擬,該值應該被設為true。
  cancelable bool類型:表示該事件是否能夠被取消,針對滑鼠事件模擬,該值應該被設為true。
  view 抽象視圖:事件授予的視圖,這個值幾乎全是document.defaultView.
  detail int類型:附加的事件資訊這個初始化時一般應該預設為0。
  screenX int類型: 事件距離螢幕左邊的X座標
  screenY int類型: 事件距離螢幕上邊的y座標
  clientX int類型: 事件距離視覺區域左邊的X座標
  clientYint類型: : 事件距離可視區域上邊的y座標
  ctrlKey Boolean類型: 代表ctrol鍵是否被按下,預設為false。
  altKey Boolean類型 : 代表alt鍵是否被按下,預設為false。
  shiftKey Boolean類型 : 代表shif鍵是否被按下,預設為false。
  metaKey Boolean類型: 代表meta key 是否被按下,預設是false。
  button int類型: 表示被按下的滑鼠鍵,預設是零. 
  relatedTarget (object) : 事件的關聯物件.只有在模擬mouseover 和 mouseout時使用。

值得注意的是,initMouseEvent()的參數直接與event物件相映射,其中前四個參數是由瀏覽器用到,只有事件處理函數用到其他的參數,當事件物件作為參數傳給dispatch()方式,target屬性將會自動被賦上值。下面是一個例子,

 var btn = document.getElementById(“myBtn”);
 var event = document.createEvent(“MouseEvents”);
 event.initMouseEvent(“click”, true, true, document.defaultView, 0, 0, 0, 0, 0,false, false, false, false, 0, null);
 btn.dispatchEvent(event);

在DOM實作的瀏覽器中,所有其他的事件都包含dbclick,都可以透過相同的方式來實現。
c)鍵盤事件模擬
  值得注意的是鍵盤事件已經從DOM2級事件中移出了,起初在DOM2級事件的草案版中,鍵盤事件是作為草案的一部分的,但在最終版被移出了,FF已經實現了草案版中的鍵盤事件,值得注意的是在DOM3級事件中實現的鍵盤事件與DOM2級事件草案版中的鍵盤事件還是存在很大差異的。
在dom3級事件中建立一個鍵盤事件物件是透過createEvent()方法,並傳入KeyBoardEvent字串作為參數,對傳回的event對象,呼叫initKeyBoadEvent()方法初始化,初始化鍵盤事件的參數有以下幾個:
  type (string) - 要觸發的事件類型,例如「keydown」.
  bubbles (Boolean) — 代表事件是否應該冒泡. 
  cancelable (Boolean) — 代表事件是否可以被取消. 
  view (AbstractView) — 被授予事件的視圖. 通常值為:document.defaultView.
  key (string) — 按下鍵按下的鍵對應的code.
  location (integer) — 按下鍵按下的鍵對應的code.
  location (integer) — 按下鍵按下的鍵對應的code.
  location (integer) — 按下鍵按下的鍵對應的code.
  location (integer) — 按下鍵按下所在的位置. 0 :預設鍵盤, 1 左側位置, 2 右側位置, 3 數字鍵盤區, 4 虛擬鍵盤區, or 5 遊戲手把.
  modifiers (string) — 一個有空格分開的修飾符列表.

  repeat (integer) — 一行中某個鍵被按下的次數.

請注意的是,在DOM3事件中,費掉了keypress事件,因此按照下面的方式,你只能模擬鍵盤上的keydown 和keyup事件。

 var textbox = document.getElementById(“myTextbox”),event;
    if (document.implementation.hasFeature(“KeyboardEvents”, “3.0”)){
      event = document.createEvent(“KeyboardEvent”);
      event.initKeyboardEvent(“keydown”, true, true, document.defaultView, “a”,0, “Shift”, 0);
    }
    textbox.dispatchEvent(event);

在FF下,允許你透過使用document.createEvent('KeyEvents'),這種方式來建立鍵盤事件,初始化的方法為initKeyEvent(),這個方法接受10個參數,
  type (string) — 要觸發的事件類型,例如「keydown」.
  bubbles (Boolean) — 代表事件是否應該冒泡.
  cancelable (Boolean) — 代表事件是否可以被取消. 
  view (AbstractView) — 被授予事件的是圖. 通常值為:document.defaultView.
  ctrlKey (Boolean) — 代表ctrol鍵是否按下. 預設false.
  altKey (Booleanrol鍵是否按下. 預設false.#alt#  altKey (Boolean) — 代表鍵是否按下. 預設false.
  shiftKey (Boolean) — 代表shift鍵是否按下.預設false.
  metaKey (Boolean) — 代表meta鍵是否按下. 預設值) — 鍵按下或釋放時鍵所對應的鍵碼.預設為0;  charCode (integer) — 按下的鍵的字元所對應的ASCII code.是共keypress事件使用的預設為0.
D)模擬其他事件

滑鼠事件和鍵盤事件是在瀏覽器中最長被模擬的事件,但某些時候同樣需要模擬突變事件和HTML事件。可以用createEvent('MutationEvents'),來創建一個突變事件對象,可以採用initMutationEvent()來初始化這個事件對象,參數包括type, bubbles, cancelable, relatedNode, prevValue,

newValue, attrName, 和attrChange.可以attrChange.採用下面的方式模擬一個突變事件:


 var event = document.createEvent('MutationEvents');
 event.initMutationEvent(“DOMNodeInserted”, true, false, someNode, “”,””,””,0);
 target.dispatchEvent(event);

對於HTML事件,直接上程式碼。


 var event = document.createEvent(“HTMLEvents”);
 event.initEvent(“focus”, true, false);
 target.dispatchEvent(event);

對於突變事件和HTML事件是很少在瀏覽器中用到,因為他們收應用程式的限制。
E)定制DOM事件在DOM3級事件中定義了一類事件稱之為custom event,我稱之為客戶事件,客戶事件不會原生的被dom觸發,而是直接提供,以至於開發者可以創建自己的事件,你可以創建一個自己的客戶事件,透過調用createEvent('CustomEvent'),對返回的事件物件調用,initCustomEvent()方法,其中傳遞四個參數type,bubbles,cancelable ,detail。 ps:小弟對這部分理解有限,在這裡只是拋磚引玉。
F)IE中的事件模擬

從IE8,以及更早版本的IE,都在模仿DOM模擬事件的方式:創建事件對象,初始化事件訊息,之後觸發事件。當然IE在完成這幾個步驟的過程是不同的。

首先不同於dom中建立event物件的方法,IE採用document.createEventObject()方法,且沒有參數,傳回一個通用的事件對象,接下來要對傳回的event物件賦值,此時ie並沒有提供初始化函數,你只能採用物理方法一個一個的賦值,最後在目標元素上呼叫fireEvent()方法,參數為兩個:事件處理的名稱和建立的事件物件。當fireEvent方法被呼叫的時候,event物件的srcElement和type屬性將會被自動賦值,其他將需要手動賦值。請看下面的範例: #######
var btn = document.getElementById(“myBtn”);
  var event = document.createEventObject();
  event.screenX = 100;
  event.screenY = 0;
  event.clientX = 0;
  event.clientY = 0;
  event.ctrlKey = false;
  event.altKey = false;
  event.shiftKey = false;
  event.button = 0;
  btn.fireEvent(“onclick”, event);

  这个例子创建了一个事件对象,之后通过一些信息初始化该事件对象,注意事件属性的赋值是无序的,对于事件对象来说这些属性值不是很重要,因为只有事件句柄对应的处理函数(event handler)会用到他们。对于创建鼠标事件、键盘事件还是其他事件的事件对象之间是没有区别的,因为一个通用的事件对象,可以被任何类型的事件触发。
  值得注意的是,在Dom的键盘事件模拟中,对于一个keypress模拟事件的结果不会作为字符出现在textbox中,即使对应的事件处理函数已经触发。
  与DOM事件模拟相比,个人觉得IE的事件模拟更容易让人记忆和接受,统一的事件模型可以带来一些便捷。

以上是淺談Javascript事件模擬的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript引擎:比較實施JavaScript引擎:比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

超越瀏覽器:現實世界中的JavaScript超越瀏覽器:現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

使用Next.js(後端集成)構建多租戶SaaS應用程序使用Next.js(後端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js(前端集成)構建多租戶SaaS應用程序如何使用Next.js(前端集成)構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript:探索網絡語言的多功能性JavaScript:探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

JavaScript的演變:當前的趨勢和未來前景JavaScript的演變:當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript:它的作用以及為什麼重要神秘的JavaScript:它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python還是JavaScript更好?Python還是JavaScript更好?Apr 06, 2025 am 12:14 AM

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称,适用于数据分析和Web开发。2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器