zoukankan      html  css  js  c++  java
  • 使用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

  • 相关阅读:
    T4 assembly
    HtmlPrefixScopeExtensions
    PetaPoco修改
    类属性赋值
    Microsoft Office 2007的ContentType
    年月日-正则
    Unity shader学习之逐顶点漫反射光照模型
    Unity3d之表情动画--眨眼
    shader之法线变换
    Unity之fragment shader中如何获得视口空间中的坐标
  • 原文地址:https://www.cnblogs.com/neverleave/p/6113324.html
Copyright © 2011-2022 走看看