如何监听页面DOM变动并高效响应资源-CSDN下载

3 浏览量 2021-02-25 12:55:19 上传评论收藏 193KB PDF 举报

资源推荐

资源详情

资源评论

如何监听页面如何监听页面DOM变动并高效响应变动并高效响应

最近在做 chrome 插件开发，既然是插件那就难免不对现有页面做一些控制，比如事件监听、调整布局、对 DOM 元素的增删

改查等等。其中有一个需求比较有意思，便整理一下顺便把涉及到的知识点复习一遍。

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

从 DOM 变动事件监听说起

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

法的过程。

Graphical representation of an event dispatched in a DOM tree using

the DOM event flow

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

MDN 对该事件的定义：

The load event is fired when a resource and its dependent resources

have finished loading.

怎么理解资源及其依赖资源已加载完毕呢?简单来说，如果一个页面涉及到图片资源，那么 onload 事件会在页面完全载入(包

括图片、css文件等等)后触发。一个简单的监听事件用 JavaScript 应该这样书写(注意不同环境下 load 和 onload 的差异)：

v

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

内容反馈

weixin_38703794

粉丝: 3

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip