首頁 > web前端 > js教程 > Jquery中Event物件屬性小結_jquery

Jquery中Event物件屬性小結_jquery

WBOY
發布: 2016-05-16 16:12:31
原創
1231 人瀏覽過

 JS的Event對像是觸發事件的時候傳遞給事件處理函數的一個對象,這個對像中存在觸發事件的基本資訊。如:觸發事件的事件來源、鍵盤碼(如果存在)等基本資訊。

1、透過event.type取得事件的類型

複製程式碼 程式碼如下:

<script><br /> $(function(){<br />     $("a").click(function(event) {<br />       alert(event.type);//取得事件類型<br />       //return false;//阻止連結跳轉<br />       event.preventDefault();<br />     });<br /> })<br /> </script>

2、取得事件目標的屬性值
html部分程式碼如下:

複製程式碼 程式碼如下:

複製程式碼 程式碼如下:

<script><br /> $(function(){<br />     $("a[href=http://google.com]").click(function(event) {<br />       alert(event.target.href);//取得觸發事件的<a>元素的href屬性值<br />       return false;//阻止連結跳轉<br />     });<br /> })<br /> </script>

可以取得到屬性href的值為‘http://google.com'。

3、取得滑鼠對應的座標值x與y

複製程式碼 程式碼如下:

<script><br /> $(function(){<br />     $("a").click(function(e) {<br />       alert("Current mouse position: " e.pageX ", " e.pageY );//取得滑鼠目前相對於頁面的座標<br />       return false;//阻止連結跳轉<br />     });<br /> })<br /> </script>

這裡傳遞的參數名稱不一定要是event,可以是任意的名稱,只要後面的相對應就可以。預設傳入的值為event。如果你不給參數的話,就會預設傳入一個叫event的參數。

4、which屬性可以取得對應的事件對應的值
which 屬性指示按了哪個鍵或按鈕。

複製程式碼 程式碼如下:

<script><br /> $(function(){<br />     $("a").mousedown(function(e){<br />         alert(e.which)  // 1 = 滑鼠左鍵 left; 2 = 滑鼠中鍵; 3 = 滑鼠右鍵<br />         return false;//阻止連結跳轉<br />     })<br /> })<br /> </script>

關於如何得到一個鍵在Javascript中的Keycode值,可以參考:

複製程式碼 程式碼如下:

鍵碼 8 = 退格鍵 退格鍵
鍵碼 9 = Tab Tab
鍵碼 12 = 清除
鍵碼 13 = 輸入
鍵碼 16 = Shift_L
鍵碼 17 = Control_L
鍵碼 18 = Alt_L
鍵碼 19 = 暫停
鍵碼 20 = Caps_Lock
鍵碼 27 = 退出 退出
鍵碼 32 = 空格 空格
鍵碼 33 = 之前
鍵碼 34 = 下一個
鍵碼 35 = 結束
鍵碼 36 = 首頁
鍵碼 37 = 左
鍵碼 38 = 向上
鍵碼 39 = 右
鍵碼 40 = 向下
鍵碼 41 = 選擇
鍵碼 42 = 列印
鍵碼 43 = 執行
鍵碼 45 = 插入
鍵碼 46 = 刪除
鍵碼 47 = 幫助
鍵碼 48 = 0 等於右大括號
鍵碼 49 = 1 感嘆號進階
鍵碼 50 = 2 引用bl Twosuperior
鍵碼 51 = 3 節三級
密鑰代碼 52 = 4 美元
鍵碼 53 = 5%
鍵碼 54 = 6 與符號
鍵碼 55 = 7 斜線大括號
鍵碼 56 = 8 parenleft括號左
鍵碼 57 = 9 右括號右
鍵碼 65 = a A
鍵碼 66 = b B
鍵碼 67 = c C
鍵碼 68 = d D
密鑰代碼 69 = e E EuroSign
鍵碼 70 = f F
鍵碼 71 = g G
鍵碼 72 = h H
鍵碼 73 = i I
鍵碼 74 = j J
鍵碼 75 = k K
鍵碼 76 = l L
鍵碼 77 = m M mu
鍵碼 78 = n N
鍵碼 79 = o O
鍵碼 80 = p P
鍵碼 81 = q Q 位於
鍵碼 82 = r R
鍵碼 83 = s S
鍵碼 84 = t T
鍵碼 85 = u U
鍵碼 86 = v V
鍵碼 87 = w W
鍵碼 88 = x X
鍵碼 89 = y Y
鍵碼 90 = z Z
鍵碼 96 = KP_0 KP_0
鍵碼 97 = KP_1 KP_1
鍵碼 98 = KP_2 KP_2
鍵碼 99 = KP_3 KP_3
鍵碼 100 = KP_4 KP_4
鍵碼 101 = KP_5 KP_5
鍵碼 102 = KP_6 KP_6
鍵碼 103 = KP_7 KP_7
鍵碼 104 = KP_8 KP_8
鍵碼 105 = KP_9 KP_9
鍵碼 106 = KP_Multiply KP_Multiply
鍵碼 107 = KP_Add KP_Add
鍵碼 108 = KP_Separator KP_Separator
鍵碼 109 = KP_Subtract KP_Subtract
鍵碼 110 = KP_Decimal KP_Decimal
鍵碼 111 = KP_Divide KP_Divide
鍵碼 112 = F1
鍵碼 113 = F2
鍵碼 114 = F3
鍵碼 115 = F4
鍵碼 116 = F5
鍵碼 117 = F6
鍵碼 118 = F7
鍵碼 119 = F8
鍵碼 120 = F9
鍵碼 121 = F10
鍵碼 122 = F11
鍵碼 123 = F12
鍵碼 124 = F13
鍵碼 125 = F14
鍵碼 126 = F15
鍵碼 127 = F16
鍵碼 128 = F17
鍵碼 129 = F18
鍵碼 130 = F19
鍵碼 131 = F20
鍵碼 132 = F21
鍵碼 133 = F22
鍵碼 134 = F23
鍵碼 135 = F24
鍵碼 136 = Num_Lock
鍵碼 137 = Scroll_Lock
鍵碼 187 = 急性墳墓
鍵碼 188 = 逗號分號
鍵碼 189 = 減底線
鍵碼 190 = 句號冒號
鍵碼 192 = 數字符號撇號
鍵碼 210 = 加減連字巨集
鍵碼 212 = 已註冊版權
鍵碼 213 = guillemotleft guillemotright
鍵碼 214 = 男性或女性
鍵碼 215 = ae AE
密鑰代碼 216 = 分日元
鍵碼 217 = Questiondown 感嘆號
鍵碼 218 = 四分之一四分之一四分之三
鍵碼 220 = 較小的較大的條
鍵碼 221 = 加星號 asciitilde
鍵碼 227 = 乘除
鍵碼 228 = acircumflex Acircumflex
鍵碼 229 = ecircumflex Ecircumflex
鍵碼 230 = icircumflex Icircumflex
鍵碼 231 = ocircumflex Ocircumflex
鍵碼 232 = ucircumflex Ucircumflex
鍵碼 233 = ntilde Ntilde
鍵碼 234 = yacute Yacute
鍵碼 235 = oslash Ooblique
鍵碼 236 = aring Aring
鍵碼 237 = ccedilla Ccedilla
鍵碼 238 = 刺 THORN
金鑰代碼 239 = eth ETH
鍵碼 240 = 分音符變音貨幣
鍵碼 241 = agrave Agrave atilde Atilde
鍵碼 242 = egrave Egrave
鍵碼 243 = igrave Igrave
鍵碼 244 = ograve Ograve otilde Otilde
鍵碼 245 = ugrave Ugrave
鍵碼 246 = adiaeresis Adiaeres
鍵碼 247 = ediaeresis Ediaeres
鍵碼 248 = idiaeresis Idiaeres
鍵碼 249 = odiaeresis Odiaeres
鍵碼 250 = udiaeresis Udiaeresis
鍵碼 251 = ssharp 問題反斜線
鍵碼 252 = asciicircum 度
密鑰代碼 253 = 3 英鎊
鍵碼 254 = Mode_switch

以上是js中的鍵值參考,其中比較重要的有13(enter),32(空格),27(ESC),16(Shift),17(Ctrl),18(Alt)。

更多的值可以透過下面的jQuery來取得:

複製程式碼 程式碼如下:

<script><br /> $(function(){<br />     $("input").keyup(function(e){//取得keyup時間的值<br />         alert(e.which);<br />     })<br /> })<br /> </script>
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板