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. EMC VNX5200/5400存储 新增LUN与Hosts映射操作

    EMC VNX5200/5400 1.创建RAID  Groups 1.1        进入EMC VNX5200/5400主界面,依次选择Storage——Storage Pools——RAID ...

  2. hadoop spark 总结

    yarn  由,资源管理器rm,应用管理器am appMaster,节点管理器nm 组成! 图侵删 yarn 的设计,是为了代替hadoop 1.x的jobtracker 集中式一对多的资源管理「资源 ...

  3. 14.Idea在html里面的快捷键

    1.IntelliJ-Idea里常用的快捷键 Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*…*/ ) Shift+F6 重构-重命名 Ctrl+X 删除行 Ctrl+D 复制行 C ...

  4. 【微软2017年预科生计划在线编程笔试 B】Tree Restoration

    [题目链接]:https://hihocoder.com/problemset/problem/1490 [题意] 给你一棵树的以下信息: 1.节点个数 2.给出树的每一层从左到右的顺序每个节点的编号 ...

  5. AIX中查看进程内存使用

    AIX中查看进程内存使用 学习了:http://www.2cto.com/os/201308/235858.html 1,从大到小排列10个内存使用率进程 ps aux |  head -1 ;  p ...

  6. 教你高速高效接入SDK——Unity统一接入渠道SDK(Android篇)

    U8SDK的设计之初,就是为了可以支持各种游戏引擎开发的游戏,而不不过Android的原生平台.眼下一大半的手游,都是採用Unity3D和Cocos2dx开发,那么这里,我们就先来一步步给大家演示,用 ...

  7. Android基础新手教程——3.4 TouchListener PK OnTouchEvent + 多点触碰

    Android基础新手教程--3.4 TouchListener PK OnTouchEvent + 多点触碰 标签(空格分隔): Android基础新手教程 本节引言: 如题,本节给大家带来的是To ...

  8. Java高级程序猿技术积累

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveDczNDQwMDE0Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  9. Squares-暴力枚举或者二分

    B - Squares Time Limit:3500MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit  ...

  10. ios设计一部WindowsPhone手机

    ios设计一部WindowsPhone手机 main.m #import <Foundation/Foundation.h> #import "WindowsPhone.h&qu ...