Javascript 自定义调整大小事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10110108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript Custom Resize Event
提问by Alain
I have a very simple question, or at least it seems that way.
我有一个非常简单的问题，或者至少看起来是这样。
I have a DIV element which will be resized at one moment. I want to be able to capture the resizing moment.
我有一个 DIV 元素，它将在某一时刻调整大小。我希望能够捕捉到调整大小的时刻。
Something like this:
像这样的东西：
function myFunction(){
alert('The DIV was resized');
}
divElement.addEventListener("resize", myFunction, false);
Does anyone know the answer?
有人知道答案吗？
Thanks
谢谢
回答by Alain
As of December 2011, there's no built-in event to detect when a div resizes, just when a window resizes.
截至 2011 年 12 月，没有内置事件来检测 div 何时调整大小，只是在窗口调整大小时进行检测。
Check out this related question: Detecting when a div's height changes using jQuery, and this plugin from the solution to that question: http://benalman.com/projects/jquery-resize-plugin/
看看这个相关的问题：Detecting when a div's height changes using jQuery，以及这个问题的解决方案中的这个插件：http: //benalman.com/projects/jquery-resize-plugin/
With jQuery resize event, you can now bind resize event handlers to elements other than window, for super-awesome-resizing-greatness!
Why is a plugin needed for the resize event?
Long ago, the powers-that-be decided that the resize event would only fire on the browser's window object. Unfortunately, that means that if you want to know when another element has resized, you need to manually test its width and height, periodically, for changes. While this plugin doesn't do anything fancy internally to obviate that approach, the interface it provides for binding the event is exactly the same as what's already there for window.
For all elements, an internal polling loop is started which periodically checks for element size changes and triggers the event when appropriate. The polling loop runs only once the event is actually bound somewhere, and is stopped when all resize events are unbound.
使用 jQuery 调整大小事件，您现在可以将调整大小事件处理程序绑定到窗口以外的元素，以获得超级棒的调整大小！
为什么调整大小事件需要插件？
很久以前，权力决定了 resize 事件只会在浏览器的 window 对象上触发。不幸的是，这意味着如果您想知道另一个元素何时调整了大小，您需要定期手动测试其宽度和高度的变化。虽然这个插件在内部并没有做任何花哨的事情来消除这种方法，但它提供的用于绑定事件的接口与 window 已经存在的接口完全相同。
对于所有元素，都会启动一个内部轮询循环，它会定期检查元素大小的变化并在适当的时候触发事件。轮询循环仅在事件实际绑定到某处时运行，并在所有调整大小事件解除绑定时停止。
Sample Code
示例代码
// You know this one already, right?
$(window).resize(function(e){
// do something when the window resizes
});
// Well, try this on for size!
$("#unicorns").resize(function(e){
// do something when #unicorns element resizes
});
// And of course, you can still use .bind with namespaces!
$("span.rainbows").bind( "resize.rainbows", function(e){
// do something when any span.rainbows element resizes
});
回答by Ishan Jain
You can try this plugin - http://benalman.com/code/projects/jquery-resize/examples/resize/
你可以试试这个插件 - http://benalman.com/code/projects/jquery-resize/examples/resize/
There are various examples. Try resizing your window and see how elements inside container elements adjusted.
有各种各样的例子。尝试调整窗口大小并查看容器元素中的元素如何调整。
In that resize() event is bound to an elements having class "test" and also to the window object and in resize callback of window object $('.test').resize() is called.
在该 resize() 事件绑定到具有类“test”的元素以及窗口对象，并在窗口对象 $('.test').resize() 的调整大小回调中被调用。
e.g.
例如
$('#test_div').bind('resize', function(){
console.log('resized');
});
$(window).resize(function(){
$('#test_div').resize();
});
回答by Alexander Bird
My first thought is to use a custom event system. You can find a pure javascript one here ( http://www.nczonline.net/blog/2010/03/09/custom-events-in-javascript/)
我的第一个想法是使用自定义事件系统。你可以在这里找到一个纯 javascript ( http://www.nczonline.net/blog/2010/03/09/custom-events-in-javascript/)
After including his code, you can do something like this:
包含他的代码后，您可以执行以下操作：
function myFunction(){
alert('The DIV was resized');
}
div_elm = document.getElmentById('div-to-resize');
EventTarget.call(div_elm);
div_elm.addListener("resize", myFunction);
Then later, just add one line to wherever you are resizing the div.
然后，只需在调整 div 大小的任何位置添加一行。
div_elm.width += 100 //or however you are resizing your div
div_elm.fire("resize");
I think that should work for you.
我认为这应该对你有用。
EDIT:
编辑：
If you are not the one coding the resizing, then my first thought is something like this:
如果您不是编码调整大小的人，那么我的第一个想法是这样的：
var resizeScannerInterval_id = (function(div) {
var width = div.offsetWidth;
var height = div.offsetHeight;
var interval_id = setInterval(function() {
if( div.offsetWidth != width || div.offsetHeight != height )
width = div.offsetWidth;
height = div.offsetHeight;
div.fire();
}
},250);
})(document.getElementById('div-id'))
回答by Marc J. Schmidt
There is a very efficient method to determine if a element's size has been changed.
有一种非常有效的方法可以确定元素的大小是否已更改。
http://marcj.github.io/css-element-queries/
http://marcj.github.io/css-element-queries/
This library has a class ResizeSensor which can be used for resize detection. It uses a event-based approach, so it's damn fast and doesn't waste CPU time.
该库有一个 ResizeSensor 类，可用于调整大小检测。它使用基于事件的方法，因此速度非常快并且不会浪费 CPU 时间。
Please do not usethe jQuery onresize plugin as it uses setTimeout()loop to check for changes. THIS IS INCREDIBLY SLOW AND NOT ACCURATE.
请不要使用jQuery onresize 插件，因为它使用setTimeout()循环来检查更改。这非常慢而且不准确。
