中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

Javascript事件模擬的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹了Javascript事件模擬的示例分析,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)是工信部頒發(fā)資質(zhì)IDC服務(wù)器商,為用戶提供優(yōu)質(zhì)的雅安服務(wù)器托管服務(wù)

事件是用來描述網(wǎng)頁(yè)中某一特定有趣時(shí)刻的,眾所周知事件通常是在由用戶和瀏覽器進(jìn)行交互時(shí)觸發(fā),其實(shí)不然,通過Javascript可以在任何時(shí)間觸發(fā)特定的事件,并且這些事件與瀏覽器創(chuàng)建的事件是相同的。這就意味著會(huì)有適當(dāng)?shù)氖录芭?,并且瀏覽器會(huì)執(zhí)行分配的事件處理程序。這種能力在測(cè)試web應(yīng)用程序的時(shí)候,是非常有用的,在DOM 3級(jí)規(guī)范中提供了方法來模擬特定的事件,IE9 chrome FF Opera 和 Safari都支持這樣的方式,在IE8及以前的辦法的IE瀏覽器有他自己的方式來模擬事件。

Javascript事件模擬

a)Dom 事件模擬
可以通過document上的createEvent()方法,在任何時(shí)候創(chuàng)建事件對(duì)象,此方法只接受一個(gè)參數(shù),既要?jiǎng)?chuàng)建事件對(duì)象的事件字符串,在DOM2 級(jí)規(guī)范上所有的字符串都是復(fù)數(shù)形式,在DOM 3級(jí)事件上所有的字符串都采用單數(shù)形式,所有的字符串如下:
UIEvents:通用的UI 事件,鼠標(biāo)事件鍵盤事件都是繼承自UI事件,在DOM 3 級(jí)上使用的是 UIEvent。
MouseEvents:通用的鼠標(biāo)事件,在DOM 3 級(jí)上使用的是 MouseEvent。
MutationEvents:通用的突變事件,在DOM 3 級(jí)上使用的是 MutationEvent。
HTMLEvents:通用的HTML事件,在DOM3級(jí)上還沒有等效的。
注意,ie9是唯一支持DOM3級(jí)鍵盤事件的瀏覽器,但其他瀏覽器也提供了其他可用的方法來模擬鍵盤事件。
一旦創(chuàng)建了一個(gè)事件對(duì)象,就要初始化這個(gè)事件的相關(guān)信息,每一種類型的事件都有特定的方法來初始化,在創(chuàng)建完事件對(duì)象之后,通過dispatchEvent()方法來將事件應(yīng)用到特定的dom節(jié)點(diǎn)上,以便其支持該事件。這個(gè)dispatchEvent()事件,支持一個(gè)參數(shù),就是你創(chuàng)建的event對(duì)象。

相關(guān)推薦:《JavaScript基礎(chǔ)教程》
b)鼠標(biāo)事件模擬
鼠標(biāo)事件可以通過創(chuàng)建一個(gè)鼠標(biāo)事件對(duì)象來模擬(mouse event object),并且授予他一些相關(guān)信息,創(chuàng)建一個(gè)鼠標(biāo)事件通過傳給createEvent()方法一個(gè)字符串“MouseEvents”,來創(chuàng)建鼠標(biāo)事件對(duì)象,之后通過iniMouseEvent()方法來初始化返回的事件對(duì)象,iniMouseEvent()方法接受15參數(shù),參數(shù)如下:
type string類型 :要觸發(fā)的事件類型,例如‘click’。
bubbles Boolean類型:表示事件是否應(yīng)該冒泡,針對(duì)鼠標(biāo)事件模擬,該值應(yīng)該被設(shè)置為true。
cancelable bool類型:表示該事件是否能夠被取消,針對(duì)鼠標(biāo)事件模擬,該值應(yīng)該被設(shè)置為true。
view 抽象視圖:事件授予的視圖,這個(gè)值幾乎全是document.defaultView.
detail int類型:附加的事件信息這個(gè)初始化時(shí)一般應(yīng)該默認(rèn)為0。
screenX int類型 : 事件距離屏幕左邊的X坐標(biāo)
screenY int類型 : 事件距離屏幕上邊的y坐標(biāo)
clientX int類型 : 事件距離可視區(qū)域左邊的X坐標(biāo)
clientY int類型 : 事件距離可視區(qū)域上邊的y坐標(biāo)
ctrlKey Boolean類型 : 代表ctrol鍵是否被按下,默認(rèn)為false。
altKey Boolean類型 : 代表alt鍵是否被按下,默認(rèn)為false。
shiftKey Boolean類型 : 代表shif鍵是否被按下,默認(rèn)為false。
metaKey Boolean類型: 代表meta key 是否被按下,默認(rèn)是false。
button int類型: 表示被按下的鼠標(biāo)鍵,默認(rèn)是零.
relatedTarget (object) : 事件的關(guān)聯(lián)對(duì)象.只有在模擬mouseover 和 mouseout時(shí)用到。

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


 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實(shí)現(xiàn)的瀏覽器中,所有其他的事件都包括dbclick,都可以通過相同的方式來實(shí)現(xiàn)。
c)鍵盤事件模擬
值得注意的是鍵盤事件已經(jīng)從DOM2級(jí)事件中移出了,起初在DOM2級(jí)事件的草案版中,鍵盤事件是作為草案的一部分的,但在最終版被移出了,F(xiàn)F已經(jīng)實(shí)現(xiàn)了草案版中的鍵盤事件,值得注意的是在DOM3級(jí)事件中實(shí)現(xiàn)的鍵盤事件與DOM2級(jí)事件草案版中的鍵盤事件還是存在很大差異的。
在dom3級(jí)事件中創(chuàng)建一個(gè)鍵盤事件對(duì)象是通過createEvent()方法,并傳入KeyBoardEvent字符串作為參數(shù),對(duì)返回的event對(duì)象,調(diào)用initKeyBoadEvent()方法初始化,初始化鍵盤事件的參數(shù)有以下幾個(gè):
type (string) - 要觸發(fā)的事件類型,例如“keydown”.
bubbles (Boolean) — 代表事件是否應(yīng)該冒泡.
cancelable (Boolean) — 代表事件是否可以被取消.
view (AbstractView) — 被授予事件的視圖. 通常值為:document.defaultView.
key (string) — 按下的鍵對(duì)應(yīng)的code.
location (integer) — 按下鍵所在的位置. 0 :默認(rèn)鍵盤, 1 左側(cè)位置, 2 右側(cè)位置, 3 數(shù)字鍵盤區(qū), 4 虛擬鍵盤區(qū), or 5 游戲手柄.
modifiers (string) — 一個(gè)有空格分開的修飾符列表.
repeat (integer) — 一行中某個(gè)鍵被按下的次數(shù).
請(qǐng)注意的是,在DOM3事件中,費(fèi)掉了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'),這種方式來創(chuàng)建鍵盤事件,初始化的方法為initKeyEvent(),這個(gè)方法接受10個(gè)參數(shù),
type (string) — 要觸發(fā)的事件類型,例如“keydown”.
bubbles (Boolean) — 代表事件是否應(yīng)該冒泡.
cancelable (Boolean) — 代表事件是否可以被取消.
view (AbstractView) — 被授予事件的是圖. 通常值為:document.defaultView.
ctrlKey (Boolean) — 代表ctrol鍵是否按下. 默認(rèn) false.
altKey (Boolean) — 代表alt鍵是否按下. 默認(rèn) false.
shiftKey (Boolean) — 代表shift鍵是否按下. 默認(rèn) false.
metaKey (Boolean) — 代表meta鍵是否按下. 默認(rèn) false.
keyCode (integer) — 鍵按下或釋放時(shí)鍵所對(duì)應(yīng)的鍵碼. 默認(rèn)是0;
charCode (integer) — 按下的鍵的字符所對(duì)應(yīng)的ASCII code.是共keypress事件使用的 默認(rèn)是0.
D)模擬其他事件
鼠標(biāo)事件和鍵盤事件是在瀏覽器中最長(zhǎng)被模擬的事件,,但是某些時(shí)候同樣需要模擬突變事件和HTML事件??梢杂胏reateEvent('MutationEvents'),來創(chuàng)建一個(gè)突變事件對(duì)象,可以采用initMutationEvent()來初始化這個(gè)事件對(duì)象,參數(shù)包括type, bubbles, cancelable, relatedNode, prevValue,
newValue, attrName, 和attrChange.可以采用下面的方式來模擬一個(gè)突變事件:


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

對(duì)于HTML事件,直接上代碼。


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

對(duì)于突變事件和HTML事件是很少在瀏覽器中用到,因?yàn)樗麄兪諔?yīng)用程序的限制。
E)定制DOM事件
在DOM3級(jí)事件中定義了一類事件稱之為 custom event,我稱之為客戶事件,客戶事件不會(huì)原生的被dom觸發(fā),而是直接提供,以至于開發(fā)者可以創(chuàng)建他們自己的事件,你可以創(chuàng)建一個(gè)自己的客戶事件,通過調(diào)用createEvent('CustomEvent'),對(duì)返回的事件對(duì)象調(diào)用,initCustomEvent()方法,其中傳遞四個(gè)參數(shù)type,bubbles,cancelable,detail。ps:小弟對(duì)這部分理解有限,在這里只是拋磚引玉。
F)IE中的事件模擬
從IE8,以及更早版本的IE,都在模仿DOM模擬事件的方式:創(chuàng)建事件對(duì)象,初始化事件信息,之后觸發(fā)事件。當(dāng)然IE在完成這幾個(gè)步驟的過程是不同的。
首先不同于dom中創(chuàng)建event對(duì)象的方法,IE采用document.createEventObject()方法,并且沒有參數(shù),返回一個(gè)通用的事件對(duì)象,接下來要對(duì)返回的event對(duì)象賦值,此時(shí)ie并沒有提供初始化函數(shù),你只能采用物理方法一個(gè)一個(gè)的賦值,最后在目標(biāo)元素上調(diào)用fireEvent()方法,參數(shù)為兩個(gè):事件處理的名稱和創(chuàng)建的事件對(duì)象。當(dāng)fireEvent方法被調(diào)用的時(shí)候,event對(duì)象的srcElement和type屬性將會(huì)被自動(dòng)賦值,其他將需要手動(dòng)賦值。請(qǐng)看下面的例子: 


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);

這個(gè)例子創(chuàng)建了一個(gè)事件對(duì)象,之后通過一些信息初始化該事件對(duì)象,注意事件屬性的賦值是無序的,對(duì)于事件對(duì)象來說這些屬性值不是很重要,因?yàn)橹挥惺录浔鷮?duì)應(yīng)的處理函數(shù)(event handler)會(huì)用到他們。對(duì)于創(chuàng)建鼠標(biāo)事件、鍵盤事件還是其他事件的事件對(duì)象之間是沒有區(qū)別的,因?yàn)橐粋€(gè)通用的事件對(duì)象,可以被任何類型的事件觸發(fā)。
值得注意的是,在Dom的鍵盤事件模擬中,對(duì)于一個(gè)keypress模擬事件的結(jié)果不會(huì)作為字符出現(xiàn)在textbox中,即使對(duì)應(yīng)的事件處理函數(shù)已經(jīng)觸發(fā)。
與DOM事件模擬相比,個(gè)人覺得IE的事件模擬更容易讓人記憶和接受,統(tǒng)一的事件模型可以帶來一些便捷。

感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享Javascript事件模擬的示例分析內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,遇到問題就找創(chuàng)新互聯(lián),詳細(xì)的解決方法等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前名稱:Javascript事件模擬的示例分析-創(chuàng)新互聯(lián)
文章位置:http://m.rwnh.cn/article16/dpepdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)域名注冊(cè)、網(wǎng)站改版、App設(shè)計(jì)、網(wǎng)站導(dǎo)航、Google

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)
荔浦县| 崇仁县| 望都县| 从化市| 无极县| 双牌县| 九江市| 长寿区| 德惠市| 壶关县| 宣汉县| 鹤岗市| 古浪县| 台中市| 甘肃省| 嘉峪关市| 遵义县| 昭平县| 寿阳县| 龙里县| 江川县| 巧家县| 宣恩县| 龙南县| 巴南区| 余江县| 民丰县| 昭平县| 甘德县| 常德市| 浦东新区| 衢州市| 衡阳市| 桂平市| 根河市| 武乡县| 甘泉县| 青铜峡市| 青岛市| 昌吉市| 黔江区|