使用MutationObserver对象封装一个监听DOM生成的函数
(function(win){
'use strict'; var listeners = [];
var doc = win.document;
var MutationObserver = win.MutationObserver || win.WebKitMutationObserver;
var observer; function ready(selector, fn){
// 储存选择器和回调函数
listeners.push({
selector: selector,
fn: fn
});
if(!observer){
// 监听document变化
observer = new MutationObserver(check);
observer.observe(doc.documentElement, {
childList: true,
subtree: true
});
}
// 检查该节点是否已经在DOM中
check();
} function check(){
// 检查是否匹配已储存的节点
for(var i = 0; i < listeners.length; i++){
var listener = listeners[i];
// 检查指定节点是否有匹配
var elements = doc.querySelectorAll(listener.selector);
for(var j = 0; j < elements.length; j++){
var element = elements[j];
// 确保回调函数只会对该元素调用一次
if(!element.ready){
element.ready = true;
// 对该节点调用回调函数
listener.fn.call(element, element);
}
}
}
} // 对外暴露ready
win.ready = ready; })(this); ready('.foo', function(element){
// ...
});
当任何元素生成都会触发回调函数check
使用MutationObserver对象封装一个监听DOM生成的函数的更多相关文章
- MutationObserver 监听DOM树变化
1 概述 Mutation observer 是用于代替 Mutation events 作为观察DOM树结构发生变化时,做出相应处理的API.为什么要使用mutation observer 去代替 ...
- js动态监听dom变化
原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀 var MutationObserver = window.MutationO ...
- js实时监听dom尺寸变化
开发过程中总会遇到dom节点尺寸变化,去做一些相应的逻辑,第一想到的应该是用$(window).resize()去做,但是这个是监听浏览器窗口的所以这个时候要用 ResizeObserver Resi ...
- JS监听DOM结构变化
在做一个微博的接入,需要判断微博是否被关注,要检查微博标签的DIV是否有“已关注”的字符,但这个DIV的内容是微博JSSDK动态生成.$("#id").html()是获取不到我想要 ...
- jQuery学习(监听DOM加载)
jQuery的extend方法 function njQuery() { } /* njQuery.extend = function (obj) { // 此时此刻的this就是njQuery这个类 ...
- javascript 原生方法监听DOM结构改变事件
js原生方法监听DOM结构改变事件 document.addEventListener('DOMNodeInserted',function(){alert(1)},false);document.a ...
- MutationObserver 监听 DOM 树变化
MutationObserver 是用于代替 MutationEvents 作为观察 DOM 树结构发生变化时,做出相应处理的 API .为什么要使用 MutationObserver 去代替 Mut ...
- angular监听dom渲染完成,判断ng-repeat循环完成
一.前言 最近做了一个图片懒加载的小插件,功能需要dom渲染完成后,好获取那些需要懒加载的dom元素.那么问题来了,如果只是感知静态的dom用ready,onload都可以,但项目用的angular, ...
- swift项目第六天:中间发布按钮的封装以及监听点击事件
import UIKit /* 总结:1:给UIButton写分类,新建文件swiftFile,一般为了区分起名字都是名字-Extension,要想调用UI控件需要导入 import UIKit框架, ...
随机推荐
- iOS、mac开源项目及库(感谢原作者的分享)
目录 模糊效果 富文本 表相关 HUD与Toast 其他UI 其他动画 网络测试 网络聊天 Model 数据库 PDF 摄像照相视频音频处理 消息相关 消息推送服务器端 版本新API的Demo 测试及 ...
- POJ3692 Kindergarten 【最大独立集】
Kindergarten Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 5317 Accepted: 2589 Desc ...
- 解决svn状态图标不显示的办法
SVN是一款出色的代码版本控制工具,大部分开发者都在使用.由于前不久刚做了系统,所以要重装一下SVN,结果就出了问题,问题就是,不管是文件处于什么状态他的提示图标都不显示,这就太不给力了吧.通过搜寻, ...
- Python 文件I/O (转)
Python 文件I/O 本章只讲述所有基本的的I/O函数,更多函数请参考Python标准文档. 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式.此函数把你 ...
- Archlinux 从 AUR 源中安装应用
Archlinux 从 AUR 源中安装应用 AUR((Arch 用户软件仓库) Arch用户软件仓库( Arch User Repository,AUR )是为用户而建.由用户主导的Arch软件仓库 ...
- 广播接收者 BroadcastReceiver 示例-2
BaseActivity /**所有Activity的基类*/ public class BaseActivity extends Activity { @Override prote ...
- JQuery中常用的 属性选择器
jQuery中使用$()作为选择符极大提高工作效率以及方便快捷;一些常用属性的选择器由以下几种 1) $('#id') id选择器 2) $('.class') css选择器,class类名 3) $ ...
- Android material design support library -- CollapsingToolbarLayout简介
本文是codetrick上material design support library教程的第三篇,主要讲的是CollapsingToolbarLayout的概念和应用方法. 原文链接:Materi ...
- Hashtable键值集合
//Hashtable键值集合 键必须是维一的 类似于索引 Hashtable ht = new Hashtable(); ht.Add(, "中国"); ht.Add(, ); ...
- CentOS6.5 PHP基础环境搭建 [个人整理-亲测可用]
** * CentOS6.5 搭建基础PHP环境(yum安装) * http://www.aiplaypc.com/160.html ** #安装需要的包,有依赖关系,自动帮你解决 yum ins ...