Javascript 教程 在线

2533onresize 事件通过监听对象的高和宽

onresize 事件通过监听对象的高和宽,其中任何一个属性发生变化都会触发 onresize 事件。

楼上提到的解决方法存在问题。

// 只能解决楼上提到触发两次的情况,实际浏览器的 resize 事件可能会触发 n 次,持续时间并不一定是 100 毫秒,例如用户拖动浏览器的边框,以下代码会执行多次 callback 事件;
function windowResizeEvent(callback) {
    var firstFire = null;

    window.onresize = function () {
        if(firstFire === null) {
            firstFire = setTimeout(function() {
                firstFire = null;
                callback();
            }, 100);
        }
    }
}

// 改进代码
function windowResizeEvent(callback) {
    window.onresize = function() {
        var target = this;
        if (target.resizeFlag) {
            clearTimeout(target.resizeFlag);
        }
        
        target.resizeFlag = setTimeout(function() {
            callback();
            target.resizeFlag = null;
        }, 100);
    }
}

除了 window 对象,其他 html 标签好像并不支持 onresize 事件,定义了之后并不会触发。

2532修改浏览器窗口大小触发两次 onresize 事件的解决方法

发现浏览器窗口缩小时会触发两次 onresize 事件,解决方法:

当浏览器窗口大小改变的时候将会触发onresize事件。

可以监控该事件的发生做一些响应式的处理:

JS:

window.onresize(function(){
    //code
}):

jQuery:

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

在监控的过程中发现每次改变浏览器窗口的时候 onresize 事件都会触发两次(产生 的原因貌似比较复杂,网上没有定论,发现在最大化浏览器的时候,浏览器也会闪一下,有两次窗口大小的改变)。

解决方法: setTimeout()

function windowResizeEvent(callback) {
    var firstFire = null;

    window.onresize = function () {
        if(firstFire === null) {
            firstFire = setTimeout(function() {
                firstFire = null;
                callback();
            }, 100);
        }
    }
}

2531该事件在即将离开页面(刷新或关闭)时触发 2 onerror

img 使用 onerror 以后,如果 onerror 指定的图片也是不存在的话,会出现无限死循环 404。

解决方法:

<img src="image.gif"  onerror="javascript:this.src='src/images/default.jpg';this.onerror = null">

2530图像的加载被中断 ( object ) 2 onbeforeunload

经常会有一些在用户离开页面前执行一些业务的应用场景,这都要用到 onbeforeunload 事件;比如记录用户停留时长的业务,在 GA 等页面访问统计的应用中都包含这个:

;(function(){
    var startTime = Math.ceil(new Date().getTime()/1000), //单位秒
        getDuration = function(){
            var time = '',
                hours = 0,
                minutes = 0,
                seconds = 0,
                endTime = Math.ceil(new Date().getTime()/1000),
                duration = endTime - startTime;

            hours = Math.floor(duration/3600); //停留小时数
            minutes = Math.floor(duration%3600/60); //停留分钟数
            seconds = Math.floor(duration%3600%60); //停留秒数

            time = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);

            return time;
        };        


    window.onbeforeunload = function(e){
        var duration = getDuration();

        //request(duration);
    };
})();

2529鼠标按键被松开 2 键盘事件属性 描述 DOM onkeydown

匹配键盘左右键。

document.addEventListener("keydown",keydown);
//键盘监听,注意:在非ie浏览器和非ie内核的浏览器
//参数1:表示事件,keydown:键盘向下按;参数2:表示要触发的事件
function keydown(event){
    //表示键盘监听所触发的事件,同时传递参数event
    switch(event.keyCode){
        case 37:
            alert("左键");
            break;
        case 39:
            alert("右键");
            break;
    }
}