JS中的event 對象詳解

来源:http://www.cnblogs.com/nield-bky/archive/2016/11/19/6081830.html
-Advertisement-
Play Games

JS中的event 對象詳解 JS的event對象 Event屬性和方法:1. type:事件的類型,如onlick中的click;2. srcElement/target:事件源,就是發生事件的元素;3. button:聲明被按下的滑鼠鍵,整數,1代表左鍵,2代表右鍵,4代表中鍵,如果按下多個鍵, ...


JS中的event 對象詳解

  JS的event對象 Event屬性和方法:

1. type:事件的類型,如onlick中的click;

2. srcElement/target:事件源,就是發生事件的元素;

3. button:聲明被按下的滑鼠鍵,整數,1代表左鍵,2代表右鍵,4代表中鍵,如果按下多個鍵,酒把這些值加起來,所以3就代表左右鍵同時按下;(firefox中 0代表左鍵,1代表中間鍵,2代表右鍵)

4. clientX/clientY:事件發生的時候,滑鼠相對於瀏覽器視窗可視文檔區域的左上角的位置;(在DOM標準中,這兩個屬性值都不考慮文檔的滾動情況,也就是說,無論文檔滾動到哪裡,只要事件發生在視窗左上角,clientX和clientY都是 0,所以在IE中,要想得到事件發生的坐標相對於文檔開頭的位置,要加上
document.body.scrollLeft和 document.body.scrollTop)

5. offsetX,offsetY/layerX,layerY:事件發生的時候,滑鼠相對於源元素左上角的位置;

6. x,y/pageX,pageY:檢索相對於父要素滑鼠水平坐標的整數;

7. altKey,ctrlKey,shiftKey等:返回一個布爾值;

8. keyCode:返回keydown何keyup事件發生的時候按鍵的代碼,以及keypress 事件的Unicode字元;(firefox2不支持 event.keycode,可以用 event.which替代 )

9. fromElement,toElement:前者是指代mouseover事件中滑鼠移動過的文檔元素,後者指代mouseout事件中滑鼠移動到的文檔元素;

10. cancelBubble:一個布爾屬性,把它設置為true的時候,將停止事件進一步起泡到包容層次的元素;(e.cancelBubble = true; 相當於 e.stopPropagation();)

11. returnValue:一個布爾屬性,設置為false的時候可以組織瀏覽器執行預設的事件動作;(e.returnValue = false; 相當於 e.preventDefault();)

12. attachEvent(),detachEvent()/addEventListener(),removeEventListener:為制定 DOM對象事件類型註冊多個事件處理函數的方法,它們有兩個參數,第一個是事件類型,第二個是事件處理函數。在
attachEvent()事件執行的時候,this關鍵字指向的是window對象,而不是發生事件的那個元素;

13. screenX、screenY:滑鼠指針相對於顯示器左上角的位置,如果你想打開新的視窗,這兩個屬性很重要;


一些說明:

1.  event代表事件的狀態,例如觸發event對象的元素、滑鼠的位置及狀態、按下的鍵等等;

2.  event對象只在事件發生的過程中才有效。
firefox里的event跟IE里的不同,IE里的是全局變數,隨時可用;firefox里的要用參數引導才能用,是運行時的臨時變數。
在IE/Opera中是window.event,在Firefox中是event;而事件的對象,在IE中是 window.event.srcElement,在Firefox中是event.target,Opera中兩者都可用。

3.  下麵兩句效果相同
var evt = (evt) ? evt : ((window.event) ? window.event : null);
var evt = evt || window.event; // firefox下window.event為null, IE下event為null

4.  IE中事件的起泡
IE中事件可以沿著包容層次一點點起泡到上層,也就是說,下層的DOM節點定義的事件處理函數,到了上層的節點如果還有和下層相同事件類型的事件處理函數,那麼上層的事件處理函數也會執行。例如, div 標簽包含了 a ,如果這兩個標簽都有onclick事件的處理函數,那麼執行的情況就是先執行標簽 a 的onclick事件處理函數,再執行 div 的事件處理函數。如果希望的事件處理函數執行完畢之後,不希望執行上層的 div 的onclick的事件處理函數了,那麼就把cancelBubble設置為true即可。

js event.keyCode對應的鍵碼:

keycode 8 = BackSpace BackSpace 
keycode 9 = Tab Tab 
keycode 12 = Clear 
keycode 13 = Enter 
keycode 16 = Shift_L 
keycode 17 = Control_L 
keycode 18 = Alt_L 
keycode 19 = Pause 
keycode 20 = Caps_Lock 
keycode 27 = Escape Escape 
keycode 32 = space space 
keycode 33 = Prior 
keycode 34 = Next 
keycode 35 = End 
keycode 36 = Home 
keycode 37 = Left 
keycode 38 = Up 
keycode 39 = Right 
keycode 40 = Down 
keycode 41 = Select 
keycode 42 = Print 
keycode 43 = Execute 
keycode 45 = Insert 
keycode 46 = Delete 
keycode 47 = Help 
keycode 48 = 0 equal braceright 
keycode 49 = 1 exclam onesuperior 
keycode 50 = 2 quotedbl twosuperior 
keycode 51 = 3 section threesuperior 
keycode 52 = 4 dollar 
keycode 53 = 5 percent 
keycode 54 = 6 ampersand 
keycode 55 = 7 slash braceleft 
keycode 56 = 8 parenleft bracketleft 
keycode 57 = 9 parenright bracketright 
keycode 65 = a A 
keycode 66 = b B 
keycode 67 = c C 
keycode 68 = d D 
keycode 69 = e E EuroSign 
keycode 70 = f F

keycode 71 = g G 
keycode 72 = h H 
keycode 73 = i I 
keycode 74 = j J 
keycode 75 = k K 
keycode 76 = l L 
keycode 77 = m M mu 
keycode 78 = n N 
keycode 79 = o O 
keycode 80 = p P 
keycode 81 = q Q at 
keycode 82 = r R 
keycode 83 = s S 
keycode 84 = t T 
keycode 85 = u U 
keycode 86 = v V 
keycode 87 = w W 
keycode 88 = x X 
keycode 89 = y Y 
keycode 90 = z Z 
keycode 96 = KP_0 KP_0 
keycode 97 = KP_1 KP_1 
keycode 98 = KP_2 KP_2 
keycode 99 = KP_3 KP_3 
keycode 100 = KP_4 KP_4 
keycode 101 = KP_5 KP_5 
keycode 102 = KP_6 KP_6 
keycode 103 = KP_7 KP_7 
keycode 104 = KP_8 KP_8 
keycode 105 = KP_9 KP_9 
keycode 106 = KP_Multiply KP_Multiply 
keycode 107 = KP_Add KP_Add

keycode 108 = KP_Separator KP_Separator 
keycode 109 = KP_Subtract KP_Subtract 
keycode 110 = KP_Decimal KP_Decimal 
keycode 111 = KP_Divide KP_Divide 
keycode 112 = F1 
keycode 113 = F2 
keycode 114 = F3 
keycode 115 = F4 
keycode 116 = F5 
keycode 117 = F6 
keycode 118 = F7 
keycode 119 = F8 
keycode 120 = F9 
keycode 121 = F10 
keycode 122 = F11 
keycode 123 = F12 
keycode 124 = F13 
keycode 125 = F14 
keycode 126 = F15 
keycode 127 = F16 
keycode 128 = F17 
keycode 129 = F18 
keycode 130 = F19 
keycode 131 = F20 
keycode 132 = F21 
keycode 133 = F22 
keycode 134 = F23 
keycode 135 = F24 
keycode 136 = Num_Lock 
keycode 137 = Scroll_Lock 
keycode 187 = acute grave 
keycode 188 = comma semicolon 
keycode 189 = minus underscore 
keycode 190 = period colon 
keycode 192 = numbersign apostrophe 
keycode 210 = plusminus hyphen macron 
keycode 211 = 
keycode 212 = copyright registered 
keycode 213 = guillemotleft guillemotright 
keycode 214 = masculine ordfeminine 
keycode 215 = ae AE 
keycode 216 = cent yen 
keycode 217 = questiondown exclamdown 
keycode 218 = onequarter onehalf threequarters 
keycode 220 = less greater bar 
keycode 221 = plus asterisk asciitilde 
keycode 227 = multiply division

keycode 228 = acircumflex Acircumflex 
keycode 229 = ecircumflex Ecircumflex 
keycode 230 = icircumflex Icircumflex 
keycode 231 = ocircumflex Ocircumflex 
keycode 232 = ucircumflex Ucircumflex 
keycode 233 = ntilde Ntilde 
keycode 234 = yacute Yacute 
keycode 235 = oslash Ooblique 
keycode 236 = aring Aring 
keycode 237 = ccedilla Ccedilla 
keycode 238 = thorn THORN 
keycode 239 = eth ETH 
keycode 240 = diaeresis cedilla currency 
keycode 241 = agrave Agrave atilde Atilde 
keycode 242 = egrave Egrave 
keycode 243 = igrave Igrave 
keycode 244 = ograve Ograve otilde Otilde 
keycode 245 = ugrave Ugrave 
keycode 246 = adiaeresis Adiaeresis 
keycode 247 = ediaeresis Ediaeresis 
keycode 248 = idiaeresis Idiaeresis 
keycode 249 = odiaeresis Odiaeresis 
keycode 250 = udiaeresis Udiaeresis 
keycode 251 = ssharp question backslash 
keycode 252 = asciicircum degree 
keycode 253 = 3 sterling 
keycode 254 = Mode_switch

鍵值對應表
A  0X65  U   0X85
B  0X66  V   0X86
C  0X67  W   0X87
D  0X68  X   0X88
E  0X69  Y   0X89
F  0X70  Z   0X90
G  0X71  0   0X48
H  0X72  1   0X49
I  0X73  2   0X50
J  0X74  3   0X51
K  0X75  4   0X52
L  0X76  5   0X53
M  0X77  6   0X54
N  0X78  7   0X55
O  0X79  8   0X56
P  0X80  9   0X57
Q  0X81 ESC  0X1B
R  0X82 CTRL  0X11
S  0X83 SHIFT 0X10
T  0X84 ENTER 0XD

如果要使用組合鍵,則可以利用event.ctrlKey,event.shiftKey,event .altKey判斷是否按下了ctrl鍵、shift鍵以及alt鍵.

-此文章轉載-轉載自:http://www.cnblogs.com/zxktxj/archive/2012/02/26/2369176.html
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 都說搞C的牛叉,那是因為C解決問題,全靠程式員自己。而我們Java有異常機制,數組越界了會提示,開發效率也比C高,不需要程式員對底層瞭解太多,這一切的一切都歸功於Java Virtual Machine-Java虛擬機。JVM其實就是一個抽象的電腦,它有自己的指令集,有自己的機器語言(ByteCo... ...
  • 隔了兩周,首先回顧一下,在Mybatis中的SqlMapper配置文件中引入的幾個擴展機制: 1.引入SQL配置函數,簡化配置、屏蔽DB底層差異性 2.引入自定義命名空間,允許自定義語句級元素、腳本級元素 3.引入表達式配置,擴充SqlMapper配置的表達能力 前面兩條已經舉過例子,現在來看看怎麼 ...
  • spider有一個配置文件spider.xml,為xml格式,spider.xml採用DTD進行管理,用於管理spider的所有特性、路由、高可用等。 配置文件支持三種不同的方式進行指定: 1、 通過環境變數指定。SPIDER_CONFIG環境變數指定spider啟動文件所在的位置。 2、 通過ja ...
  • 2016.11.19 周六,我們在 北航參加了《GDG 谷歌開發者大會》,在web專場,聆聽了谷歌公司的與會專家的技術分享。 中午免費的午餐,下午精美的下午茶,還有精湛的技術,都是我們隊谷歌公司刮目相看。 web場分享的主題主要有下麵的幾個: 1)深度學習 TensorFlow 2)http 2協議 ...
  • 今天來回顧鞏固“韓信點兵” 首先:我們來看下其來源:在一千多年前的《孫子算經》中,有這樣一道算術題:“今有物不知其數,三三數之剩二,五五數之剩三,七七數之剩二,問物幾何?”按照今天的話來說:一個數除以3餘2,除以5餘3,除以7餘2,求這個數。這樣的問題,也有人稱為“韓信點兵”。 本人因是學java出 ...
  • 最近遇到一個問題, 執行腳本,腳本調用 一個命令,命令(deamon)是一個守護進程,為了調試,取消了守護進程模式。導致命令後邊的其他命令(echo "456")都無法執行。 deamon -d 是以守護進程模式啟動;deamon -x 是以非守護進程模式啟動(監控進程,死迴圈),stdout和st ...
  • spider RPC 特性介紹 spider RPC 性能測試 spider RPC 入門指南 spider RPC 配置文件參考 spider RPC需求來源 spider RPC的需求源於作者所在公司佈局證券金融服務行業某細分領域2B saas服務平臺的需要,以儘可能達到高可靠性、最小化單點影響 ...
  • 本部分將介紹使用spider RPC開發分散式應用的客戶端和服務端。 spider RPC中間件基於J2SE 8開發,因此需要確保伺服器上安裝了JDK 8及以上版本,不依賴於任何額外需要獨立安裝和配置的依賴程式。 註:spider RPC 1.0.1版本之前基於JDK 1.7開發,最後改為了使用JD ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...