DOM事件速记（三）

灰沙
286 阅读3分钟

文本事件

当在文本中输入文本时触发

  1. textInput,对于keypress的补充，在文本插入文本框之前会触发;只在可编辑区域才能触发textInput事件，输入实际字符才能触发
  • 存在data属性，存放实际输入的字符
  • inputMethod属性，表示文本输入到文本框的方式
    • 0 ，表示浏览器不确定是怎么输入的
    • 1 ，表示键盘输入
    • 2 ， 粘贴进来的
    • 3 ， 拖放进去的
    • 4 ， 使用IME输入
    • 5 ， 表单选择某一项输入的
    • 6 ， 手写输入
    • 7 ， 语音输入
    • 8 ， 几种组合输入的
    • 9 ， 脚本输入

键盘事件

当用户通过键盘在页面上执行操作时触发

  1. keydown:当用户按下键盘上的任意键时触发，按住不放会重复触发
  2. keypress:当用户按下键盘上的字符键（退格键也行）时触发，按住不放重复触发，ESC键也会触发这个事件
  3. keyup用户释放键盘上的键时触发

用户按一个字符键时，触发的事件

  • keydown
  • keypress
  • 前两个都是文本框发生变化之前
  • keyup

属性

  • keyCode 对于数字字母字符键，keyCode属性的值与ASCII码中对应小写字母或数字的编码相同

合成事件

据说支持的不是很多，所以应用的很少
当为IME（Input Method Editor,输入法编辑器，因为亚洲文字成千上万）输入字符时触发

  1. compositionstart:在IME的文本复合系统打开时触发，表示要开始输入了
  2. compositionupdate:插入新字符时触发
  3. compositionend:在IME的文本复合系统关闭时触发，表示返回正常键盘输入状态

变动事件(7月一号，我才发现，这个事件已经被移除了，DOM4中用mutation Observer来代替它)

//检测浏览器是否支持变动事件
var isSupported = document.implementation.hasFeature("MutaionEvents","2.0");

当底层DOM结构发生变化时触发

  1. DOMSubtreeModified: 在DOM结构发生任何变化时触发
  2. DOMNodeInserted: 在一个节点作为子节点被插入到另一个节点时触发
  3. DOMNodeRemoved: 在节点从其父节点中被移除时触发
  4. DOMNodeInsertedIntoDocument: 在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在DOMNodeInsert之后触发
  5. DOMNodeRemovedFromDocument: 在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved之后触发
  6. DOMAttrModified: 在特性被修改之后触发
  7. DOMCharacterDataModified: 在文本节点的值发生变化时触发

删除节点触发事件
使用removeChild()或者replaceChild()从DOM中删除节点

  • DOMNodeRemoved,该事件的目标（event.target）是被删除的节点，event.relateNode属性包含着对目标节点父节点的引用，该事件可以冒泡
  • 如果删除节点包含子节点，那么在其所有子节点和该节点会相继触发DOMNodeRemovedFromDocument事件，但这个事件不冒泡
  • DOMSubtreeModified ，该事件的目标是被移除节点的父节点

插入节点触发事件
使用appendChild(),replaceChild(),insertBefore()向DOM中插入节点

  • DOMNodeInserted， event.target为插入节点，event.relateNode属性保存父节点的引用。在这个事件触发时，节点已经被插入到新的父节点中。可冒泡
  • DOMNodeInsertedIntoDocument,不冒泡，目标为新插入的节点
  • DOMSubtreeModified,触发于新插入节点的父节点
avatar
文章
阅读
粉丝