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. 针对Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1的解决方案

    背景:本项目使用JDK1.8 编译maven工程的时候出现如下错误: Failed to execute goal org.apache.maven.plugins:maven-compiler-pl ...

  2. Data mapping-数据映射

    数据映射:根据数据的结构信息建立数据间的映射操作机制. 数据映射的要素: 一.数据 1.源数据: 2.目标数据: 3.数据间关系: 4.数据的元数据(结构信息). 5.元素类型的对应关系. 二.元数据 ...

  3. js document 触发按键事件

    // 键盘控制 var keyEvent = (function () { document.onkeydown = function (e) { if (e.keyCode === 38) { // ...

  4. kafkaAPI

    使用方法见官网API介绍: https://kafka.apache.org/22/javadoc/index.html?org/apache/kafka/clients/consumer/Kafka ...

  5. NFS网络文件系统方案

    1,关闭防火墙和selinuxiptables -Fsystemctl stop firewalldsystemctl disable firewalldsetenforce 0 服务器系统    名 ...

  6. vue实现单页应用demo

    vue + webpack +ES6/7 + axiso + vuex + vue-router构建项目前端,node + express + mongodb 开发后台 项目demo地址 https: ...

  7. 【hihocoder 1511】树的方差

    [题目链接]:http://hihocoder.com/problemset/problem/1511 [题意] [题解] 有个方差的公式 V(X)=E(X2)−E(X)2 这里E(X)指的是X的期望 ...

  8. 洛谷 P2634 BZOJ 2152 【模板】点分治（聪聪可可）

    题目描述 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)……遇到这种问题,一般情况下石头剪刀布就好了,可是他们已 ...

  9. 0802关于mysql数据库的锁机制

    参考网址 http://www.cnblogs.com/yelbosh/p/5813865.html http://www.cnblogs.com/chenpingzhao/p/5065316.htm ...

  10. HDU 2224 The shortest path

    The shortest path Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...