javascript - 如何对 div 元素使用 "object.addEventListener("resize", myScript)"？

Question

在我尝试将此事件监听器添加到 div 之前

我用的是“scroll”，这个可以用，但是“resize”不能用

我不知道为什么。

这是我的代码:

$('document').ready(function() {

  var content = document.getElementById("scroller");
  var tabs = document.getElementById("tabs");

  var than, now;
  than = tabs.clientHeight;

  content.addEventListener("resize", function(event) {
    now = tabs.clientHeight;

    alert(now + "&" + than);
  }, false);


});

JSFIDDLE DEMO

或者是否有可能是这样的:

$('document').ready(function(){ 

                var content = document.getElementById("scroller");
                var hc , h;

                window.addEventListener('resize', function(event){

                    h = event.clientHeight;
               if(h>510) {
                $(".godown").fadeout("0");
                    }
               if(h<510) {
                content.addEventListener('scroll', function(event){
                 hc =  $('#scroller').scrollTop();






                    if (hc){
                   $(".godown").fadeOut("slow");
                   $(".gotop").fadeIn("slow");
                    }
 if (!hc){
                   $(".godown").fadeIn("slow");
                   $(".gotop").fadeOut("slow");

}
             }, false);
 }
                    }, false);
            });

Answer 1

您需要将事件监听器添加到 window 对象，因为它是窗口调整大小，而不是元素。 window.addEventListener("resize", function(event) {...});

我已经更新了your jsfiddle here你可以在哪里看到它的工作。

$('document').ready(function() {

  var content = document.getElementById("scroller");
  var tabs = document.getElementById("tabs");

  var than, now;
  than = tabs.clientHeight;

  window.addEventListener("resize", function(event) {
     now = tabs.clientHeight;
     alert(now + "&" + than);
     }, false);
});