利用MutationObserver对页面元素的改变进行监听
'use strict';
let MutationObserver = window.MutationObserver
|| window.WebKitMutationObserver
|| window.MozMutationObserver;
let observerMutationSupport = !!MutationObserver;
if(observerMutationSupport){
let observer = new MutationObserver((mutations) => {
mutations.forEach((item) => {
console.log(item);
});
});
const options = {
"childList" : true,//子节点的变动
"attributes" : true,//属性的变动
"characterData" : true,//节点内容或节点文本的变动
"subtree" : true,//所有后代节点的变动
"attributeOldValue" : true,//表示观察attributes变动时,是否需要记录变动前的属性
"characterDataOldValue" : true//表示观察characterData变动时,是否需要记录变动前的值
};
observer.observe(document,options);
}
利用MutationObserver对页面元素的改变进行监听的更多相关文章
- 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变
查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...
- 利用 chunked 类型响应实现后台请求的监听
Koa 中实现 chunked 数据传输 中介绍了如何在 Koa 中实现 Transfer-Encoding:chunked 类型的响应分片传输.这里来看一个应用场景. 假如我们想监听后台的请求,并将 ...
- 百度编辑器的内容改变事件监听bug
先贴上我的初始化代码,可能是用法问题冤枉了百度编辑器,如果是我的用法有问题欢迎大侠们指正 <!DOCTYPE type> <html> <head> <met ...
- JS常用方法(获取Class、获取元素样式、事件监听、cookie、ajax等)
var Util = {}; Util.byClass = function (oClass) {//全局获取 var tags = document.all ? document.all : doc ...
- AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面。。。
SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用 ...
- 页面返回刷新或H5监听(手机的)返回键
1. pushHistory(); window.addEventListener("popstate", function(e) { alert("我监听到了浏览器的返 ...
- 利用Python的pyHook包来进行键盘监听
最近在实习的时候发现一件很蛋疼的事情,那就是我们组的项目因为有后台进程,所有每次运行完以后后台进程都必须要自己手动关闭,每次编译之前忘记关就会有一大堆编译错误,我就想直接弄个可以快捷键直接关闭算了 ...
- js 元素添加多个监听
function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListen ...
- Python+Selenium自动化-定位页面元素的八种方法
Python+Selenium自动化-定位页面元素的八种方法 本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子. 0.元素定位方法主要有: id定位:find_elemen ...
随机推荐
- 树莓派学习路程No.1 树莓派系统安装与登录 更换软件源 配置wifi
在官网下载raspbian系统镜像,用Win32DiskImager写入TF卡 Image File 选择系统镜像,Device 选择TF卡盘符,Write即可.这样系统就写好了.把内存卡插进树莓派里 ...
- 在线CSS圆角生成器
http://www.paibaidu.com/demo/CSSBorder/CSSBorder.html
- ADI加速度计基础原理
- I2C总线之(三)---以C语言理解IIC
为了加深对I2C总线的理解,用C语言模拟IIC总线,边看源代码边读波形: 如下图所示的写操作的时序图: 读时序的理解同理.对于时序不理解的朋友请参考“I2C总线之(二)---时序” 完整的程序如下: ...
- Android 之使用LocalBroadcastManager解决BroadcastReceiver安全问题
在Android系统中,BroadcastReceiver的设计初衷就是从全局考虑的,可以方便应用程序和系统.应用程序之间.应用程序内的通信,所以对单个应用程序而言BroadcastReceiver是 ...
- 【POJ】1056 IMMEDIATE DECODABILITY
字典树水题. #include <cstdio> #include <cstring> #include <cstdlib> typedef struct Trie ...
- 【转】Android编译系统详解(三)——编译流程详解
原文网址:http://www.cloudchou.com/android/post-276.html 本文原创作者:Cloud Chou. 欢迎转载,请注明出处和本文链接 1.概述 编译Androi ...
- 两个月淘宝刷单,连续死N次血泪史 (转)
两个月淘宝刷单,连续死N次血泪史 派代网 2014/10/13 刷单 分享到:3 [思路网注] 看来是靠刷流量刷销量是行不通了,点击率与展现无法匹配,这是致命的!!那么,贵就贵点,直通车来吧!!再删宝 ...
- hdoj 1285 确定比赛名次【拓扑排序】
确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- mac svn命令
转载:Mac下svn command命令 svn help command 获取子命令说明 svn info $URL 查看工作空间信息 svn list 显示当前目录下svn记录文件列表,不访 ...