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. js 判断是否为数字

    if (data.value === "" || data.value == null) { return false; } console.log(!isNaN(data.val ...

  2. 去掉二级页面 tabs 菜单, 修改返回按钮

    imports: [ /*引入的模块 依赖的模块*/ BrowserModule, ComponentsModule, IonicModule.forRoot(MyApp,{ tabsHideOnSu ...

  3. BZOJ 2006 [NOI2010]超级钢琴 (堆+主席树)

    题面:BZOJ传送门 洛谷传送门 让你求前$K$大的子序列和,$n\leq 5*10^{5}$ 只想到了个$nlog^{2}n$的做法,似乎要被卡常就看题解了.. 好神奇的操作啊,我傻了 我们把序列和 ...

  4. jQuery cxCalendar 日期选择器

    简介 cxCalendar 是基于 jQuery 的日期选择器插件. 它灵活自由,你可以自定义外观,日期的范围,返回的格式等. 版本: jQuery v1.7+ jQuery cxCalendar v ...

  5. AtCoder ARC 076E - Connected?

    传送门:http://arc076.contest.atcoder.jp/tasks/arc076_c 平面上有一个R×C的网格,格点上可能写有数字1~N,每个数字出现两次.现在用一条曲线将一对相同的 ...

  6. 10.使用Mybatis-Generator自动生成Dao、Model、Mapping相关文件(转)

    出处:http://www.cnblogs.com/lichenwei/p/4145696.html Mybatis属于半自动ORM,在使用这个框架中,工作量最大的就是书写Mapping的映射文件,由 ...

  7. Kafka的存储机制以及可靠性

    一.kafka的存储机制 kafka通过topic来分主题存放数据,主题内有分区,分区可以有多个副本,分区的内部还细分为若干个segment. 所谓的分区其实就是在kafka对应存储目录下创建的文件夹 ...

  8. [Javascript Crocks] Flatten Nested Maybes with `chain`

    Sometimes, we run into situations where we end up with a Maybe within the context of another Maybe. ...

  9. Ylmf_Ghost_Win7_SP1_x64_2017_0113.iso虚拟机安装

    新建虚拟机,将iso镜像配置好,然后开启虚拟机 一开始选择PQ8.05: 找到“作业”菜单---“建立” ,新建一个“主分区”然后点击确定 新建主分区作业之后,如果需要新建其他分区继续进行即可,本例只 ...

  10. java 线程死锁的检测

    java 线程死锁的检测   例子程序: import java.util.concurrent.CountDownLatch; import java.util.concurrent.Executo ...