即时反映的input和propertychange方法
在web开发中,有时会需要动态监听输入框值的变化,当使用onkeydown、onkeypress、onkeyup作为监听事件时
会发现一些复制粘贴等操作作用不了。同时,在处理组合快捷键的时候也很麻烦,这时,我们需要更专业的解决方案:HTML标准事件:oninput、onchange和IE专属的事件properchange。
1. oninput$onchange:
oninput 和onchange都是事件对象,当输入框的值发生改变时触发该事件,不同的是,oninput是在值改变时立即触发,
而onchange是在改变后失去焦点菜触发,并且可以用在非输入框中,如select等
2. propertychange:
功能与oninput相同,用以代替oninput在IE9以下的不兼容性
propertychange和input事件:
1)propertychange只要当前对象的属性发生改变就会触发该事件
2)input是标准的浏览器事件,一般应用于input元素,当input的value发生改变就会发生,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化
3. output:
output是一个HTML5标签,IE系列浏览不兼容,主要用于计算输出,如:
$(function){
$('#username').bind('input propertychange',function(){
$('#result').html($(this).val().length + 'characters');
});
})
这里bind同时绑定了input和propertychange两个方法。
for of与for in的区别
遍历数组通常使用for循环,ES5的话也可以使用forEach,ES5遍历数组功能的函数还有map、filter、some、every、reduce、reduceRight等,只不过它们的返回结果不一样。但是使用forEach遍历数组的话,使用break不能中断循环使用return也不能返回外层函数。
Array.prototype.method = function(){ console.log(this.length); }; var myArray = [1,2,3,4,5,6,7]; myArray.name = "数组"; for(var index in myArray){ console.log(myArray[index]); }
使用for in也可以遍历数组,但是会存在以下问题:
1.index索引为字符串数字,不能直接进行几何运算
2.遍历顺序有可能不是按照实际数组的内部顺序
3.使用for in会遍历数组所有的可枚举属性,包括原型。例如上例的原型方法method和name属性
所以for in更适合遍历对象,不要使用for in遍历数组
那么除了使用for循环,更简单的正确的遍历数组方法(不遍历method和name),ES6中的for of就出来啦
Array.prototype.method = function(){ console.log(this.length); }; var myArray = [1,2,3,4,5,6,7]; myArray.name = "数组"; for(var value of myArray){ console.log(value); }
记住:for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。
遍历对象 for in的代码实例:
Object.prototype.method = function(){ console.log(this); }; var myObject = { a: 1, b: 2, c: 3, } ; for(var key in myObject){ console.log(key); }
for in可以遍历到myObject的原型方法method,如果不便利原型方法和属性的话,可以在循环内部判断一下,hasOwnPeopery方法可以判断某属性是否是该对象的实例属性
for(var key in myObject){ if(myObject.hasOwnProperty(key)){ console.log(key); } }
同样可以通过ES5中的Object.keys(MyObject)获取对象的实例属性组成的数组,不包括原型方法和属性
Object.prototype.method = function(){ console.log(this); }; var myObject = { a : 1, b : 2, c : 3 }; Object.keys(myObject).forEach(function(key,index){ console.log(key,myObject[key]); });
控制台运行结果均为: