使用jQuery监听DOM元素大小变化


Posted in Javascript onFebruary 24, 2016

起因

今天写页面的时候突然有这么个需求,由于父元素(一个DIV)的height是由javascript计算出来的固定的值,而在其中增加了一个多说插件,在用户评论后,子元素(DIV)的height属性增加,导致子元素溢出。但是又不知道如何为多说的评论按钮增加回调函数,于是乎就想到了根据子元素的大小变化来重新计算父元素的height。

onresize?

平常,都是在整个浏览器窗口变化时触发一个修改布局的回调函数。使用的是window对象的resize事件,利用:

window.onresize = callback;

来绑定。但根据resize事件的target是defaultView (window),这里详见MDN的resize文档,也就是说只有window对象有resize事件,于是乎就想到使用jQuery自己的事件机制来模拟一个普通元素上的resize事件

使用JQUERY事件的实现思路

可以想到一种比较简单的方式:

1. 在元素绑定resize对象时,记录元素的width和height
2. 使用requestAnimationFrame、setTimeout、setInterval,每隔一段时间查询其width和height,如果和记录的width和height不一样,运行回调函数并更新记录中的width为height

JQUERY插件

这个功能Ben Alman编写了一个jQuery插件,传送门
该插件的代码(核心部分),详细代码请查看Ben Alman博客的内容:

(function($, window, undefined) {
 var elems = $([]),
  jq_resize = $.resize = $.extend($.resize, {}),
  timeout_id,
  str_setTimeout = 'setTimeout',
  str_resize = 'resize',
  str_data = str_resize + '-special-event',
  str_delay = 'delay',
  str_throttle = 'throttleWindow';
 jq_resize[str_delay] = 250;
 jq_resize[str_throttle] = true;
 $.event.special[str_resize] = {
  setup: function() {
   if (!jq_resize[str_throttle] && this[str_setTimeout]) {
    return false;
   }
   var elem = $(this);
   elems = elems.add(elem);
   $.data(this, str_data, {
    w: elem.width(),
    h: elem.height()
   });
   if (elems.length === 1) {
    loopy();
   }
  },
  teardown: function() {
   if (!jq_resize[str_throttle] && this[str_setTimeout]) {
    return false;
   }
   var elem = $(this);
   elems = elems.not(elem);
   elem.removeData(str_data);
   if (!elems.length) {
    clearTimeout(timeout_id);
   }
  },
  add: function(handleObj) {
   if (!jq_resize[str_throttle] && this[str_setTimeout]) {
    return false;
   }
   var old_handler;
   function new_handler(e, w, h) {
    var elem = $(this),
     data = $.data(this, str_data);
    data.w = w !== undefined ? w : elem.width();
    data.h = h !== undefined ? h : elem.height();
    old_handler.apply(this, arguments);
   }
   if ($.isFunction(handleObj)) {
    old_handler = handleObj;
    return new_handler;
   } else {
    old_handler = handleObj.handler;
    handleObj.handler = new_handler;
   }
  }
 };

 function loopy() {
  timeout_id = window[str_setTimeout](function() {
   elems.each(function() {
    var elem = $(this),
     width = elem.width(),
     height = elem.height(),
     data = $.data(this, str_data);
    if (width !== data.w || height !== data.h) {
     elem.trigger(str_resize, [data.w = width, data.h = height]);
    }
   });
   loopy();
  }, jq_resize[str_delay]);
 }
})(jQuery, this);

jQuery为jQuery插件的开发者提供了添加自定义事件的接口,详细可以参考jQuery官方文档,这里就是典型的jQuery自定义事件添加方式,其中有三个钩子:

1. setup:The setup hook is called the first time an event of a particular type is attached to an element.首次绑定时执行,如果返回 false,使用默认方式绑定事件
2. teardown:The teardown hook is called when the final event of a particular type is removed from an element.若指定该方法,其在移除事件处理程序(removeEventListener)前执行,如果返回 false,移除默认绑定事件
3. add:Each time an event handler is added to an element through an API such as .on(), jQuery calls this hook.每一次给元素绑定事件,都会执行这个方法

setup、teardown和add三个钩子,每个钩子最先做的事都是检测是否该对象为window对象,然后根据window对象特殊处理,因为window对象本身有resize事件

从setup钩子可以看到,在初始化整个事件处理时,创建一个元素队列,队列中的每隔元素都把width和height放在data中,然后每隔250ms启动loopy函数,在loopy函数中判断是否变化,如果有变,触发回调函数并更新data中的width和height

从teardown钩子可以看到,在元素移除事件时,只需要将元素从元素队列移除,并清除元素中的data数据。如果是元素队列中的最后一个元素,则不再继续执行loopy

add钩子中,对回调函数进行了包装

由此可以看到一个简单的jQuery自定义函数的实现机制

Javascript 相关文章推荐
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
微信小程序实现转盘抽奖
Sep 21 Javascript
JavaScript中的闭包
Feb 24 #Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 #Javascript
jquery中键盘事件小结
Feb 24 #Javascript
javascript实现九宫格相加数值相等
May 28 #Javascript
Javascript类型转换的规则实例解析
Feb 23 #Javascript
理解Javascript图片预加载
Feb 23 #Javascript
Bootstarp风格的toggle效果分享
Feb 23 #Javascript
You might like
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
怎样辨别一杯好咖啡
2021/03/03 新手入门
PHP中PDO基础教程 入门级
2011/09/04 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
Python3爬楼梯算法示例
2019/03/04 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Python实现word2Vec model过程解析
2019/12/16 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
妇产科护士自我鉴定
2013/10/15 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
清洁工个人工作总结
2015/03/05 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL