event 事件兼容性处理 keycode 大全
javascript判断是否按回车键 function enterHandler(event) { var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; if (keyCode == 13) { //处理函数 } }
- 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
字母和数字键的键码值(keyCode) | |||||||
---|---|---|---|---|---|---|---|
按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
A | 65 | J | 74 | S | 83 | 1 | 49 |
B | 66 | K | 75 | T | 84 | 2 | 50 |
C | 67 | L | 76 | U | 85 | 3 | 51 |
D | 68 | M | 77 | V | 86 | 4 | 52 |
E | 69 | N | 78 | W | 87 | 5 | 53 |
F | 70 | O | 79 | X | 88 | 6 | 54 |
G | 71 | P | 80 | Y | 89 | 7 | 55 |
H | 72 | Q | 81 | Z | 90 | 8 | 56 |
I | 73 | R | 82 | 0 | 48 | 9 | 57 |
数字键盘上的键的键码值(keyCode) | 功能键键码值(keyCode) | ||||||
---|---|---|---|---|---|---|---|
按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
0 | 96 | 8 | 104 | F1 | 112 | F7 | 118 |
1 | 97 | 9 | 105 | F2 | 113 | F8 | 119 |
2 | 98 | * | 106 | F3 | 114 | F9 | 120 |
3 | 99 | + | 107 | F4 | 115 | F10 | 121 |
4 | 100 | Enter | 108 | F5 | 116 | F11 | 122 |
5 | 101 | - | 109 | F6 | 117 | F12 | 123 |
6 | 102 | . | 110 | ||||
7 | 103 | / | 111 |
控制键键码值(keyCode) | |||||||
---|---|---|---|---|---|---|---|
按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 |
BackSpace | 8 | Esc | 27 | Right Arrow | 39 | -_ | 189 |
Tab | 9 | Spacebar | 32 | Down Arrow | 40 | .> | 190 |
Clear | 12 | Page Up | 33 | Insert | 45 | /? | 191 |
Enter | 13 | Page Down | 34 | Delete | 46 | `~ | 192 |
Shift | 16 | End | 35 | Num Lock | 144 | [{ | 219 |
Control | 17 | Home | 36 | ;: | 186 | \| | 220 |
Alt | 18 | Left Arrow | 37 | =+ | 187 | ]} | 221 |
Cape Lock | 20 | Up Arrow | 38 | ,< | 188 | '" | 222 |
keycode兼容性处理:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
javascript判断是否按回车键 function enterHandler(event) { var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; if (keyCode == 13) { //处理函数 } }
event兼容性处理:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function myEventHandler(e) { // 注意参数e // 该函数调用的时候e是event对象(W3C实现) // 兼容IE的代码 e = e || window.event; // 现在e就可以兼容各种浏览器了 }
Event对象,当事件发生的时候出发某个函数,该Event对象将自动在函数内可用,该对象包含了很多事件触发时候的信息,但IE却没有这么实现,而是自己实现的,IE浏览器是通过全局对象window下的event属性来包含这些信息
preventDefault兼容性处理:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function myEventHandler(e) { e = e || window.event; // 防止默认行为 if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } }
阻止冒泡兼容性处理:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function myParagraphEventHandler(e) { e = e || window.event; // 停止向上冒泡 if (e.stopPropagation) { // W3C实现 e.stopPropagation(); } else { // IE实现 e.cancelBubble = true; } }
e.target兼容性处理:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var target = event ? event.target : window.event.srcElement;
事件委托
举例来说,如果你有一个很多行的大表格,在每个<tr>上绑定点击事件是个非常危险的想法,因为性能是个大问题。流行的做法是使用事件委托。事件委托描述的是将事件绑定在容器元素上,然后通过判断点击的target子元素的类型来触发相应的事件。事件委托依赖于事件冒泡,如果事件冒泡到table之前被禁用的话,那么下面的代码就无法工作了。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var myTable = document.getElementById('my-table'); myTable.onclick = function () { // 处理浏览器兼容 e = e || window.event; var targetNode = e.target || e.srcElement; // 测试如果点击的是TR就触发 if (targetNode.nodeName.toLowerCase() === 'tr') { alert('You clicked a table row!'); } }
关于W3C和微软模型还有其他的少许差异,比如this,在触发事件的时候函数中的this一般都是该元素上下文,,也就说this引用该元素自身,在基本事件注册和W3C模型中都没有问题,但在微软模型的实现里却可能出错,请参考如下代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function myEventHandler() { this.style.display = 'none'; } // 正常工作,this是代表该元素 myIntro.onclick = myEventHandler; // 正常工作,this是代表该元素 myIntro.addEventListener('click', myEventHandler, false); // 不正常,这时候的this是代表Window对象 myIntro.attachEvent('onclick', myEventHandler);
获取鼠标点击按键
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
getButton : function(event){ if(document.implementation.hasFeature("MouseEvents","2.0")){ return event.button; }else{ switch(event.button){ case 0 : case 1 : case 3 : case 5 : case 7 : return 0; case 2 : case 6 : return 2; case 4 : return 1; } } }
事件绑定:
1、简单实用版: 缺点:不能移除匿名处理函数事件
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function bind(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture);//DOM2.0 }else if (elm.attachEvent) { elm.attachEvent('on' + evType, function(){ fn.call(elm,window.event); });//IE5+ }else { elm['on' + evType] = fn;//DOM 0 } }
2、Dean Edwards版:
给元素添加事件,在标准浏览器中使用addEventListener,而在IE中使用attachEvent,但是IE的attachEvent不支持捕获阶段的事件处理程序,并且同一个处理程序能添加多次,并且this指向错误。
Dean Edwards给出了一种不使用attachEvent添加事件处理程序的方法,解决了同一个处理程序可以添加多次的问题,并且修正了IE中event对象与标准浏览器中event对象的差别。
http://dean.edwards.name/weblog/2005/10/add-event/
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function addEvent(element, type, handler) { // assign each event handler a unique ID if (!handler.$$guid) handler.$$guid = addEvent.guid++; // create a hash table of event types for the element if (!element.events) element.events = {}; // create a hash table of event handlers for each element/event pair var handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = {}; // store the existing event handler (if there is one) if (element["on" + type]) { handlers[0] = element["on" + type]; } } // store the event handler in the hash table handlers[handler.$$guid] = handler; // assign a global event handler to do all the work element["on" + type] = handleEvent; }; // a counter used to create unique IDs addEvent.guid = 1; function removeEvent(element, type, handler) { // delete the event handler from the hash table if (element.events && element.events[type]) { delete element.events[type][handler.$$guid]; } }; function handleEvent(event) { // grab the event object (IE uses a global event object) event = event || window.event; // get a reference to the hash table of event handlers var handlers = this.events[event.type]; // execute each event handler for (var i in handlers) { this.$$handleEvent = handlers[i]; this.$$handleEvent(event); } };