JavaScript窗口大小调整事件

我怎么能挂钩到浏览器窗口调整大小事件?

jQuery有一种监听调整大小事件的方法，但我不希望仅仅为了这一需求而将其引入我的项目中。

当前回答

首先，我知道addEventListener方法已经在上面的评论中提到过，但我没有看到任何代码。因为这是首选的方法，下面是:

window.addEventListener('resize', function(event){
  // do stuff here
});

这是一个工作样本。

2013-08-29 20:32:33

其他回答

最佳实践是添加到resize事件，而不是替换它:

window.addEventListener('resize', function(event) {
    ...
}, true);

另一种方法是为DOM事件创建一个单独的处理程序(但只能有一个)，例如。

window.onresize = function(event) {
    ...
};

jQuery可能会做一些工作来确保resize事件在所有浏览器中始终如一地触发，但我不确定是否每个浏览器都不同，但我鼓励您在Firefox、Safari和IE中进行测试。

2009-03-13 08:58:05

<script language="javascript">
    window.onresize = function() {
    document.getElementById('ctl00_ContentPlaceHolder1_Accordion1').style.height = '100%';
} 

</script>

2011-04-13 20:30:10

您可以使用以下方法，这是好的小项目

<body onresize="yourHandler(event)">

函数yourHandler(e) { console.log(大小:,e.target.innerWidth) ｝ <身体onresize = " yourHandler(事件)" > 内容……(调整浏览器大小查看) < /身体>

2020-09-07 20:10:36

永远不要重写窗口。onresize函数。

相反，应该创建一个函数来向对象或元素添加事件侦听器。这将检查监听器，如果监听器不工作，那么它将覆盖对象的函数作为最后的手段。这是jQuery等库中使用的首选方法。

对象:元素或窗口对象类型:调整大小，滚动(事件类型) 回调:函数引用

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent("on" + type, callback);
    } else {
        object["on"+type] = callback;
    }
};

那么用法是这样的:

addEvent(window, "resize", function_reference);

或者使用匿名函数:

addEvent(window, "resize", function(event) {
  console.log('resized');
});

2010-06-30 14:19:45

首先，我知道addEventListener方法已经在上面的评论中提到过，但我没有看到任何代码。因为这是首选的方法，下面是:

window.addEventListener('resize', function(event){
  // do stuff here
});

这是一个工作样本。

2013-08-29 20:32:33

JavaScript窗口大小调整事件

推荐文章

最新文章

标签