DOM2級的変動事件DOMSubtreeModified,DOMNodeInserted,DOMNodeRemoved,DOMNodeInsertedIntoDocument...
DOM變動事件的用法
DOM2級的変動事件是為XML或html的DOM設計的,不特定於某種語言。
一:變動事件的分類有7種,最常用的瀏覽器支援最多的有3種,下面黑體?
- DOMSubtreeModified:在DOM結構中發生任何變化時觸發;
- DOMNodeInserted:在一個節點作為子節點被插入到另一個節點中時觸發;
- DOMNodeRemoved:在節點從其父節點中被移除時觸發;
- DOMNodeInsertedIntoDocument:在一個節點被直接插入文件中或者通過子樹間接插入文件後觸發。在DOMNodeInserted之後觸發;
- DOMNodeRemovedFromDocument:在一個節點被直接從文件中刪除或通過子樹間接從文件中移除之前觸發。在DOMNodeRemoved之後觸發。
- DOMAttrModified:在特性被修改之後觸發;
- DOMCharacterDataModified:在文字節點的值發生變化的時候觸發。
二:刪除節點檢測?
首先觸發的是DOMNodeRemoved事件,它對應的event物件中的target屬性值是被刪除的節點,relatedNode屬性值是被刪除節點的父節點,該事件會冒泡;
其次出發的是DOMNodeRemovedFromDocument事件,它對應的event物件中的target屬性值為指定的被刪除的子節點。只有繫結到它的子節點上才能被觸發。
最後觸發的是DOMSubtreeModified事件。這個事件對應event物件中的target屬性是被移除節點的父節點。
(下面註釋的序號為觸發的順序:)
相關文章
- DOM0事件和DOM2事件模型 —— JS中的設計模式和元件封裝事件模型JS設計模式元件封裝
- DOM0、DOM2、DOM3事件處理方式的區別是什麼?事件
- azeroth-event輕量級事件驅動框架事件框架
- 事件驅動的微服務-事件驅動設計事件微服務
- Flowable框架-啟動事件-空啟動事件框架事件
- RocketMQ 事件驅動:雲時代的事件驅動有啥不同?MQ事件
- 移動端點透事件--阻止滾動事件事件
- Flowable框架-啟動事件-定時器啟動事件框架事件定時器
- javascript對點選事件和拖動事件的區分JavaScript事件
- 事件驅動系統中不同型別的事件 - frankdejonge事件型別
- Redis 中的事件驅動模型Redis事件模型
- 【.NET】多執行緒:自動重置事件與手動重置事件的區別執行緒事件
- 精簡化事件:事件驅動架構的精益力量事件架構
- Spring:事件驅動Spring事件
- ApsaraMQ Serverless 能力再升級,事件驅動架構賦能 AI 應用MQServer事件架構AI
- JQuery4:滑鼠事件和滾動事件jQuery事件
- Android輕量級事件通訊方案Android事件
- 阿里雲事件生態再升級:使用 EventBridge 驅動全量雲產品阿里事件
- 1.21 JQuery4:滑鼠事件與滾動事件jQuery事件
- 移動端touch事件事件
- 移動端 touch事件事件
- Netty背後的事件驅動機制Netty事件
- 學習 HT for Web 中的互動事件Web事件
- 事件驅動架構EDA中的元件事件架構元件
- 混合雲中的事件驅動架構事件架構
- 基於「Chrome-應用層級原生事件」的 web-UI 自動化錄製是否可行?Chrome事件WebUI
- MVC的二級聯動MVC
- 事件驅動,Do you know?事件
- 動態生成的html元素繫結click事件HTML事件
- 基於 Redis驅動的 Laravel 事件廣播RedisLaravel事件
- 基於事件驅動的測試框架ETS事件框架
- spring — Spring中的事件驅動機制解析Spring事件
- Flutter 使用者互動事件的響應Flutter事件
- 基於事件溯源與CDC的事件驅動微服務架構案例原始碼事件微服務架構原始碼
- 事件驅動系統設計之將事件檢索與事件處理解耦事件解耦
- 關閉chrome自動升級的教程 chrome如何取消自動升級Chrome
- 移動端事件穿透的原理與解決方案事件穿透
- Zilla:一個事件驅動的API閘道器事件API