1.效果图

2.源码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <style type="text/css">

        div{

            border:1px solid black;

            width:200px;

            height: 95px;

            resize:both;

            overflow: auto;

        }

    </style>

    <script type="text/javascript">

        function showSize(elementSize) {

            console.log("width:"+elementSize.width+";height:"+elementSize.height);

        }

        HTMLDivElement.prototype.onsizechange = function (handleFunction) {

            var element = this;

            var lastWidth = element.clientWidth;

            var lastHeight = element.clientHeight;

            setInterval(function () {

                if (lastWidth === element.clientWidth && lastHeight === element.clientHeight)

                    return;

                if (typeof (handleFunction) == 'function') {

                    lastWidth = element.clientWidth;

                    lastHeight = element.clientHeight;

                    handleFunction({ width: lastWidth, height: lastHeight });

                }

            }, 100);

            return element;

        };

        window.onload = function () {

            var myDiv = document.getElementById("myDiv");

            myDiv.onsizechange(showSize);

        };

    </script>

</head>

<body>

<div id="myDiv"><p>尺寸可变元素<br/>width:200px;height:95px</p></div>

</body>

</html>

利用javascript（自定义事件）记录尺寸可变元素的尺寸变化过程的更多相关文章

  1. Javascript事件模型系列（四）我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  2. 理解的javascript自定义事件

    理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...

  3. Javascript自定义事件功能与用法实例分析

    原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述 自定义事件很难 ...

  4. javascript:自定义事件初探

    javascript:自定义事件初探   http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html

  5. javascript 自定义事件 发布-订阅 模式 Event

    * javascript自定义事件 var myEvent = document.createEvent("Event"); myEvent.initEvent("myE ...

  6. JavaScript自定义事件 - createEvent()、initEvent()和dispachEvent()

    在学习目标事件的方法的时候,接触到了dispatchEvent()方法.度娘查一查,这是一个事件触发器,事件触发器其实就是触发事件的东西. 通常情况下,我们触发事件都是在交互中触发的事件,例如点击按钮 ...

  7. JavaScript自定义事件，动态添加属性

    根据事件的不同,可用的自定义方法也不同. document.createEvent('Event'); 实现主要有4个步骤: 1.创建事件. 2.初始化事件(三个参数:事件名,是否起泡,是否取消默认触 ...

  8. JavaScript自定义事件

    很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定 ...

  9. Javascript 自定义事件 (custom event)

    Javascript 中经常会用到自定义事件.如何创建一个简单的自定义事件呢?在创建自定义的事件之前,我们应该考虑一下和事件有关的东西.例如 click 事件,首先我们要能注册一个click事件(在一 ...

随机推荐

  1. c# md5加密封装

    /// <summary> /// md5加密字符串 /// </summary> /// <param name="str">需要加密的字符串 ...

  2. Python学习教程（Python学习视频_Python学些路线）：Day06 函数和模块的使用

    Python学习教程(Python学习视频_Python学些路线):函数和模块的使用 在讲解本章节的内容之前,我们先来研究一道数学题,请说出下面的方程有多少组正整数解. $$x_1 + x_2 + x ...

  3. Python笔记（29）----进程

    目录: 一.进程 多任务的概念 创建子进程----fork[Linux] 全局变量在多个进程中不共享 多次fork() 创建进程----multiprocessing[windows] 二.线程 一. ...

  4. 15.3 Task Task.Yield和Task.Delay说明

    https://blog.csdn.net/hurrycxd/article/details/79827958 书上看到一个Task.Yield例子,Task.Yield方法创建一个立即返回的awai ...

  5. 洛谷P1478 陶陶摘苹果（升级版）【水题】

    又是一年秋季时,陶陶家的苹果树结了n个果子.陶陶又跑去摘苹果,这次她有一个a公分的椅子.当他手够不着时,他会站到椅子上再试试. 这次与NOIp2005普及组第一题不同的是:陶陶之前搬凳子,力气只剩下s ...

  6. [Ynoi2015]盼君勿忘

    题目大意: 给定一个序列,每次查询一个区间\([l,r]\)中所有子序列分别去重后的和\(\bmod p\)(每次询问模数不同). 解题思路: 在太阳西斜的这个世界里,置身天上之森.等这场战争结束之后 ...

  7. onunload与onbeforeunload事件解析 标签： 浏览器 2017-04-10 09:46 45人阅读 评论(0)

    注:只测试了chrome和IE浏览器的表现情况 onunload事件 //JS Document window.onunload = onunload_message; function onunlo ...

  8. nyoj 547 优先队列

    #include<stdio.h> #include<string.h> #include<queue>//水杯盛水问题,用优先队列不断从最小的边缘开始 using ...

  9. 0818基于360开源数据库流量审计MySQL Sniffer

    开源数据库流量审计MySQL Sniffer 我最推崇的数据库安全产品就是基于流量的数据库审计,因为它不需要更改网络结构,并且也是最关键的是,不影响数据库服务器性能,不用苦口婆心的劝数据库管理员安装监 ...

  10. 【ACM】hdu_1092_A+BIV_201307261630

    A+B for Input-Output Practice (IV)Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/3276 ...