汇总 onchange onpropertychange 和 oninput 事件的区别

1、onchange 事件与 onpropertychange 事件的区别：

• onchange 事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发。
• onpropertychange 事件却是实时触发，即每增加或删除一个字符就会触发，通过 js 改变也会触发该事件，但是该事件 IE 专有。

2、oninput 事件与 onpropertychange 事件的区别：

• oninput 事件是 IE 之外的大多数浏览器支持的事件，在 value 改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过 js 改变 value 时，却不会触发。
• onpropertychange 事件是任何属性改变都会触发的，而 oninput 却只在 value 改变时触发，oninput 要通过 addEventListener() 来注册，onpropertychange 注册方式跟一般事件一样。（此处都是指在js中动态绑定事件，以实现内容与行为分离）

3、oninput 与 onpropertychange 失效的情况：

• （1）oninput 事件：a). 当脚本中改变 value 时，不会触发；b).从浏览器的自动下拉提示中选取时，不会触发。
• （2）onpropertychange 事件：当 input 设置为 disable=tru e后，onpropertychange 不会触发。

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 事件，定义了之后并不会触发。

发现浏览器窗口缩小时会触发两次 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);
        }
    }
}

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

解决方法：

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

经常会有一些在用户离开页面前执行一些业务的应用场景，这都要用到 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);
    };
})();