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

 

posted @ 2017-10-12 23:57  蜀-书心  阅读(218)  评论(0编辑  收藏  举报