键盘事件

Posted 2023-04-06

参考技术A

js中的键盘事件包括 onkeydown 、 onkeyup 、 onkeypress
1、onkeydown
键盘按下后就会立即执行的事件，不管是数字键、字母键还是功能键都能触发这个事件。
onkeydown有个特点：键盘一直按下会不停地触发事件，连续触发时，第一次和第二次的触发时间间隔会比较长一点，后面触发速度就非常的快。这种设计是为了防止误操作的发生。

2、onkeyup
键盘松开后立马执行的事件。

3、onkeypress
键盘按键被按下并释放一个键时执行。数字键、字母键能触发事件，但是功能键按下后不会触发这个事件，比如Esc、Tab、CapsLock、Shift、Ctrl、Alt、Delete、Backspace、四个方向键。

补充一些常用按键对应的Unicode编码：
Enter：13
space：32
Left：37
Up：38
Right：39
Down：40

javascript事件相关3

  1 键盘事件 和 文本事件
  2 一 键盘事件： 当用户在键盘上敲击的时候 就会触发键盘事件，DOM0级规定了键盘事件，DOM3级又重新规范了键盘事件。 DOM2级 本来是有键盘事件 不过听说再定稿以前又删除了相关内容，所以目前为止 也是靠着DOM0级的键盘事件在操作， 因为 DOM3级的键盘事件各浏览器支持程度 差异比较大 要做跨浏览器开发 实属不易，所以 最可靠的，还是DOM0级的键盘事件了。
  3 
  4 DOM0级 有三个键盘事件：
  5 1.keydown   鼠标按下那一瞬间触发
  6 2.keypress  鼠标按下字符键或者说能够影响到 文本内容显示的键的那一瞬间触发
  7 3.keyup     鼠标抬起那一瞬间触发
  8 
  9 当用户 按住任意一个键不放的时候 会重复触发 keydown 和 keypress事件
 10 当用户 按住一个字符键或者说能够影响到 文本内容显示的键不放的时候 会重复触发 keypress事件
 11 
 12 键盘事件用 也支持：shiftkey, ctrlkey, altkey, meatkey的判断。 IE不支持 meatkey
 13 
 14 键码：
 15 当发生 keydown keyup事件时 event事件对象中 包含一个keyCode属性 这个属性中保存了与键盘上特定的键对应的值。
 16 如果按下的是 数字或者字符时 此时的 keyCode中 包含的是一个与之对应的 ASCII码。
 17 DOM 和 IE 都支持这个属性
 18 
 19 键盘的每个键码 可以在google
 20 
 21 不过这里有个例外 ：就是当在键盘上按下 分号“;”时  此时不同的浏览器 keyCode值不一样。
 22 在 IE， Safari，Chrome中 keyCode ：186
 23 在 Opera, FF中 keyCode: 59
 24 
 25 字符编码：
 26 charCode属性
 27 此属性只有在触发keypress事件时才会有这个属性，这个属性的值保存的是按下这个键的 ASCII码。
 28 支持这个属性的浏览器有：IE9，Safari，Chrome，FF
 29 而IE6, IE7, IE8 和 Opear 中 是保存在 keyCode中的，所以可以写成一个 兼容性的函数。
 30 
 31 if (typeof event.charCode == "number") {
 32     return event.charCode;
 33 } else {
 34     return event.keyCode
 35 }
 36 
 37 DOM3级中的属性变化：
 38 DOM3级中 已经不再包含 charCode属性了 新增了下面两个属性
 39 1. key    为了取代keyCode的 包含的值是 一个字符串 。用户在键盘上按下的什么键 key里面就保存的相应的字符串。
 40    当用户 按下字符 S 时 就保存的 "S" 当用户按下 shift 键时 就保存的 "shift"
 41 
 42 2. char   当按下字符时保存的值与 key 相同， 当按下非字符时保存的值是 null。
 43 
 44 因为 Safari 5 和 Chrome支持的是 keyIdentifier属性 
 45 
 46 所以这三个属性的兼容性 差别太大，不建议在跨浏览器开发中使用哈！！！
 47 
 48 还有键盘事件对象中的 location属性可以判断出用户是在键盘的哪个位置 或者 不同设备 或者 虚拟键盘上触发的键盘事件。
 49 但是因为 兼容性太差 也不建议大家在 跨浏览器的开发中使用哈！！！
 50 
 51 文本事件：ie9+ Safari 和 Chrome支持
 52 
 53 textInput 是DOM3级中的一个新增事件
 54 这个事件主要是用来 替代keypress事件的，区别在于：
 55 1. 在可编辑的区域中输入字符时才会触发这个事件，
 56 2. 在输入实际的字符时才会触发这个事件。
 57 
 58 由于这个事件主要考虑的 就是输入字符的时候触发， 所以事件对象中有个 data 属性专门用来保存 用户输入的字符的 字符串。
 59 例如： 
 60 1. 当用户输入的是 大写的 "S" , 那么data中就保存的是 大写的 "S",
 61 2. 当用户输入的是 小写的 "s" , 那么data中就保存的是 小写的 "s".
 62 
 63 此事件对象中 还有一个 inputMethod属性 保存的是数值，不同的数值 代表用户是以不同的方式 输入的文本，
 64 比如 粘贴，拖拽......等等。
 65 
 66 但是由于兼容性太差 也不建议大家跨浏览器开发。
 67 
 68 复合事件：是DOM3级中新增的一类事件用来处理 IME输入序列的
 69 IME可以输入在物理键盘上 找不到的字符哦....通常需要同时按住 多个字符键，但是同时只能输入一个字符哈！！！
 70 有以下三种 复合事件：
 71 
 72 1. compositionstart     表示要开始输入了之前触发
 73 
 74 2. compositionupdate    表示在输入字段中插入新的字符时触发
 75 
 76 3. compositionend       表示输入完毕时触发
 77 
 78 当触发这三个事件时  事件对象中 包含一个 data 属性里面保存着 事件发生时候的输入值。
 79 
 80 悲剧的是 ie9+ 是唯一支持 复合事件的浏览器 所以 GG 了。跨浏览器还是别用了吧
 81 
 82 最后来看一个 变动事件吧：
 83 这个事件是 DOM2级的事件
 84 定义了 以下几个属性了：
 85 
 86 1. DOMSubtreeModified
 87 2. DOMNodeRemoved
 88 3. DOMNodeInserted
 89 4. DOMNodeInsertedIntoDocument  不会冒泡的事件
 90 5. DOMNodeRemovedFromDocument   不会冒泡的事件
 91 6. DOMAttrModified
 92 7. DOMCharacterDataModified
 93 
 94 可以通过 dicument.implementation.hasFeature("MutationEvents", "2.0") 方法来判断 浏览器是不是支持这个 变动事件。
 95 
 96 当我们通过 removeChild, replaceChild 这两个方法删除节点的时候
 97 会在节点被删除以前先触发以下事件触发：
 98 
 99 1.DOMNodeRemoved
100 2.DOMNodeRemovedFromDocument 不会冒泡的事件
101 3.DOMSubtreeModified
102 
103 当我们通过 appendChild, replaceChild, insetBefore 这三个方法添加/替换节点的时候
104 会在节点被添加以后触发以下事件触发：
105 
106 1.DOMNodeInserted
107 2.DOMNodeInsertedIntoDocument 不会冒泡的事件
108 3.DOMSubtreeModified
109 
110 除了ie9+以外 所有现代浏览器都支持这三个变动事件
111 1. DOMSubtreeModified
112 2. DOMNodeRemoved
113 3. DOMNodeInserted
114 
115 其余暂不考虑！！！！！
116 
117 今天就到这里了！ 由于最近也在读zepto的源码 所以精力实在有限 ，不详细的地方，只有自己查漏补缺了 也欢迎指出来！不胜感激。
118 当然 写写的这些笔记 都只是为了让自己的所学能够留下点印记而已 ，愿大家一起进步!!!!
119 
120 晚安