JavaScript 事件——“事件类型”中“复合事件”和“变动事件”的注意要点

  • A+
所属分类:JavaScript

复合事件

复合事件是DOM3级事件中心添加的一类事件,用于处理IME的输入序列。

compositionstart、compositionupdate、compositionend

复合事件有以下三中:

  • compositionstart:要开始输入;
  • compositionupdate:插入新字符;
  • compositionend:复合系统关闭,返回正常键盘输入状态;

event.data

data属性:

  • compositionstart访问data:正在编辑的文本;
  • compositionupdate访问data:正插入的新字符;
  • compositionend访问data:插入的所有字符;

如:

js:

变动事件(貌似作废了很多变动事件,跨浏览器不好,不建议用)

变动事件,能在DOM中的某一部分发生变化时给出提示。

主要有:

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

删除节点DOMNodeRemoved事件

当使用removeChild()或replaceChild()从DOM中删除节点,首先触发DOMNodeRemoved事件(event.target是被删除的节点,event.relatedNode属性包含对目标节点父节点的引用,在这个事件触发时,节点尚未从父节点中删除,因此其parentNode属性与event.relatedNode相同),这个事件会冒泡;其次继而触发DOMNodeRemovedFromDocument事件(event.target是被移除的节点,除此之外没有别的信息在event对象中),这个事件不回冒泡;最后触发DOMSubtreeModified事件(event.target是被移除的节点的父节点,除此之外没有别的信息在event对象中)。

如:

js:

又如:

插入节点DOMNodeInserted事件

在使用appendChild()、replaceChild()或insertBefore()向DOM中插入节点时,首先会触发DOMNodeInserted事件(event.target是被插入的节点,event.relatedNode是包含一个对父节点的引用,触发这个事件时,节点已经被插入到了新的父节点中),该事件冒泡;然后触发DOMNodeInsertedIntoDocument事件,这个事件不冒泡,因此必须在插入节点之前为它添加这个事件处理程序。最后一个触发的事件是DOMSubtreeModified,触发于新插入节点的父节点。

下面是一个todoList:

style部分:

dom部分:

js部分:

 

 

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: