JavaScript窗口调整大小事件

Question

JavaScript窗口调整大小事件如何连接到浏览器窗口调整大小的事件？有一种用于侦听调整事件大小的jQuery方法但我宁愿不把它纳入我的项目，只是为了这一项要求。

Answer 1

jQuery只是包装标准resize多姆事件

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

jQuery可以，可能做一些工作，以确保调整大小事件在所有浏览器中都是一致的，但我不确定是否有不同的浏览器，但我鼓励您在Firefox、Safari和IE中进行测试。

Answer 2

永远不要覆盖window.onresize函数。

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

object*元素或窗口对象
type调整大小，滚动(事件类型)
callback*职能参考

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');});

Answer 3

首先，我知道addEventListener方法已经在上面的注释中提到过，但是我没有看到任何代码。由于这是首选的方法，因此如下所示：

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

这是一个工作样本.