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 晚安