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. HDU_1969_二分

    Pie Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  2. matlab学习下拉菜单

    用matlab添加listbox控件 修改string和value值,value为几就对应第几行字符串 添加button按钮,将string值改为“选择x轴参数”,字体大小为10 再添加一个按钮,将s ...

  3. lua_自己对“lua函数”知识点的总结

    lua_自己对“lua函数”知识点的总结 1.lua函数的定义 --lua中,函数都是function类型的对象.(1)其可以被比较 (2)其可以赋值给一个对象(3)可以传递给函数(4)可以从函数中返 ...

  4. Noip 2013 练习

    转圈游戏 传送门 Solution 快速幂 Code //By Menteur_Hxy #include <cstdio> #include <cstdlib> #includ ...

  5. salt 根据ip修改主机名

    首先定义pillar [root@web1 pillar]# cat hostname.sls ip_hostname: 10.1.1.1: web1 10.1.1.2: web2 10.1.1.3: ...

  6. 09.正则表达式re-2.complie函数

    compile 函数用于编译正则表达式,生成一个 Pattern 对象,它的一般使用形式如下: import re # 将正则表达式编译成 Pattern 对象 pattern = re.compil ...

  7. mac Gitblit安装

    jdk下载传送门 gitBlit是java编写的的 第一步 需要安装java jdk 传送门 JDK6的下载地址: http://www.oracle.com/technetwork/java/jav ...

  8. Optimization on content service with local search in cloud of clouds

    曾老师的这篇文章发表于Journal of Network and Computer Applications,主要解决的是利用启发式算法决定如何在cloud of clouds中进行副本分发,满足用 ...

  9. 24 Point game

    24 Point game 时间限制:3000 ms  |  内存限制:65535 KB 难度:5   描述 There is a game which is called 24 Point game ...

  10. Dockerfile分离构建LNMP环境部署wordpress

    最近忙着写自己的项目,也把一个站点的bbs论坛打算迁移到Docker中,测试没发现啥大问题.在单台上面的架构如下:(往后我们也是要讲到compose和swarm调度的慢慢来) 1.首先我们先安装一下d ...