Javascript 教程 在线

2536JavaScript replace 默认只替换第一个匹配的字符

js 替换
js replace 默认只替换第一个匹配的字符
字符串有超过1个以上的对应字符无法进行替换
var strM = "要替换的字符串啊啊!";
alert(strM.replace("啊","额"));
只能替换第一个字符“啊”

js replace 全局替换
alert(s.replace(/啊/g, "额"));
可以实现整个字符串的替换
替换变量 eval  函数可计算某个字符串
并执行其中的的 JavaScript 代码

var ch = "变量",reg = "/"+ch+"/g",
str = "这是一个变量,这是一个变量",
val = str.replace(eval(reg),"替换");

alert(val);

如果替换的字符串中含有/符号时

var ch = "/", str = "这是一/个变量,这是一个变量";
var val = str .replace(new RegExp(ch,'g'),"b");
alert(val);

2534元素即将失去焦点时触发 2 oninput

汇总 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 不会触发。

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">