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. 微信小程序 请求超时处理

    1.在app.json加入一句 "networkTimeout": { "request": 10000 } 设置超时时间,单位毫秒 2.请求 wx.reque ...

  2. RecyclerView 悬浮/粘性头部效果3种方式

    但是以上两种方式onDrawOver()方法实现逻辑对初次查看该段代码要花时间理解.下面代码逻辑(原理一样,同样参考大神代码)相对清晰,易理解 public class StickyDecoratio ...

  3. 【udacity】机器学习-神经网络

    Evernote Export 1.神经网络 神经元 细胞的主体称为细胞体,然后有轴突.突触 他们构建的方式是可以调整的 我们会有一些输入的放电信号视为放电频率或输入的强度 X1​w1​X2​w2​X ...

  4. 【剑指Offer】30、连续子数组的最大和

      题目描述:   HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是 ...

  5. vfs:结构体对象

    VFS结构体 super_block 存储一个已安装的文件系统的控制信息,代表一个已安装的文件系统:每次一个实际的文件系统被安装时, 内核会从磁盘的特定位置读取一些控制信息来填充内存中的超级块对象.一 ...

  6. Mybatis配置之别名配置元素详述

    这里我们贴出之前的UserDao对应的mapper文件,如下所示 从这个配置文件中,我们可以看到<select>.<insert>和<update>三个标签元素的r ...

  7. 07.网络编程-3.TCP

    1.tcp相关介绍 TCP协议,传输控制协议(英语:Transmission Control Protocol,缩写为 TCP)是一种面向连接的.可靠的.基于字节流的传输层通信协议,由IETF的RFC ...

  8. vue cli 平稳升级webapck4

    webpack4 released 已经有一段时间了,插件系统趋于平稳,适逢对webpack3的打包速度很不满意,因此决定将当前在做的项目进行升级,正好也实践一下webpack4. 新特性 0配置 应 ...

  9. node源码详解（三）

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource3 本博客同步在https://cnodejs.o ...

  10. elasticsearch 权威指南搜索阅读笔记(四)

    多索引多type搜索 分页搜索 每页5条 查询一到3页数据 第一页:http://127.0.0.1:9200/blogs2/product/_search?size=5&from=0 第二页 ...