Question

窗口调整大小时有一个事件。

$(window).resize(function() {
    ...
});

但是，如果我想在任何类型的事件上触发事件，如果是DOM对象，那会是什么，如：

$('div#myDiv').resize(function() {
    ...
));

但上述似乎不起作用。这可行吗？还是其他任何好方法？

Answer 1

这是不可能的 - 但也不一定非常必要。如果你的div根据窗口大小改变大小，即通过媒体查询，只需使用$（window）.resize（）。如果它通过其他一些javascript代码进行更改，您应该只关注该代码。

如果您愿意，可以在div上触发调整大小事件并听取它，但您仍然会手动触发事件 - 即

$('div#myDiv').on('custom_resize', function() {
    ...
));

// whenever you change div size
$('div#myDiv').trigger('custom_resize');

如果您无法访问更改div的代码，则可以轮询宽度/高度的变化 - 例如（仅适用于宽度）：

var div_width = $('div#myDiv').width();
setInterval(function() {
    if (div_width != $('div#myDiv').width()) {
        div_width = $('div#myDiv').width();
        $('div#myDiv').trigger('custom_resize');
    }
}, 1);

如果你动态添加图片，这应该可行：

$('<img>').on('load', function() { ... })
          .attr('src', {img url})
          .appendTo({container})

Answer 2

此插件提供基于元素创建调整大小事件的功能：

跨浏览器，基于事件，元素调整大小检测。

简而言之，此实现不使用内部计时器进行检测   大小变化（我发现的大多数实现都是如此）。它使用滚动   大多数浏览器上的事件，以及IE10及以下的onresize事件。

使用的方法不仅检测javascript生成的调整大小更改   还有CSS伪类所做的改变，例如：悬停，CSS   动画等。

https://github.com/sdecima/javascript-detect-element-resize

如何使用jquery在一般DOM对象上激活事件

2 个答案: