<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Resize</title>
<script src=https://www.haoid.cn/"./EleResize.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#resizeDiv {
width: 60%;
height: 60%;
border: 1px solid red;
margin: 20px;
}
button {
margin: 20px 20px 0;
}
</style>
</head>
<body>
<button onclick="addListener()">addListener</button>
<button onclick="removeListener()">removeListener</button>
<button onclick="resize()">resize</button>
<div id="resizeDiv"></div>
<script>
var resizeDiv = document.getElementById('resizeDiv');
function resize() {
resizeDiv.style.width = "200px";
}
var listener = function () {
console.log("resize");
};
function addListener() {
EleResize.on(resizeDiv, listener);
}
function removeListener() {
EleResize.off(resizeDiv, listener)
}
</script>
</body>
</html>
原理
这里的具体实现分两类，
ie9-10
默认支持div的resize事件，可以直接通过div.attachEvent('onresize', handler);的方式实现
其它浏览器
通过在div中添加一个内置object元素实现监听。
设置object元素的style使其填充满div，这样当div的size发生变化时，object的size也会发生变化。
然后监听object元素的contentDocument.defaultView(window对象)的resize事件。
注： 本文提供的是如何监听resize事件，其实在resize时，可能会连续快速的触发(比如拖动浏览器)，为了提高效率，可以考虑使用批处理的模式。
到此这篇关于JS如何监听div的resize事件的文章就介绍到这了,更多相关JS监听div的resize事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！