java如何监听屏幕变化_如何监听页面 DOM 变动并高效响应

原标题：如何监听页面 DOM 变动并高效响应

作者：hijiangtao

hijiangtao.github.io/2017/08/03/How-to-Manipulate-DOM-Effectively/

最近在做 chrome 插件开发，既然是插件那就难免不对现有页面做一些控制，比如事件监听、调整布局、对 DOM 元素的增删改查等等。其中有一个需求比较有意思，便整理一下顺便把涉及到的知识点复习一遍。

需求是这样的：在一个包含懒加载资源以及动态 DOM 元素生成的页面中，需要针对页面中存在的元素添加属性显示标签。

从 DOM 变动事件监听说起

首先假设大家已经知道 Java 中事件的发生阶段(捕获-命中-冒泡)，附上一张图带过这个内容，我们直接进入寻找解决方法的过程。

Graphical representation of an event dispatched in a DOM tree using the DOM event flow

开始的时候我一直在 window 状态改变涉及到的事件中寻找，一圈搜寻下来发现也就 事件最接近了，所以我们看看 MDN 对该事件的定义：

The load event is fired when a resource and its dependent resources have finished loading.

怎么理解资源及其依赖资源已加载完毕呢？简单来说，如果一个页面涉及到图片资源，那么 事件会在页面完全载入(包括图片、css文件等等)后触发。一个简单的监听事件用 Java 应该这样书写(注意不同环境下 load 和 的差异)：

<>

window.addEventListener("load",function(event){

console.log("All resources finished loading!");

});

// or

window.=function(){

console.log("All resources finished loading!");

};

// HTML

// jQuery

$(window).on("load",handler)

>

当然，说到 事件，有一个 jQuery 中相似的事件一定会被提及—— ready 事件。jQuery 中这样定义这个事件：

Specify a function to execute when the DOM is fully loaded.

需要知道的是 jQuery 定义的 ready 事件实质上是为 DOMContentLoaded 事件设计的，所以当我们谈论加载时应该区分的事件其实是 (接口 UIEvent) 以及 DOMContentLoaded(接口 Event)，MDN 这样描述 DOMContentLoaded：