jquery--onchange
触发onchange
⾸先页⾯有⼀个input标签,并且已绑定onchange事件,如:
1<input type="text"onchange="console.log(this.value);"/>
这个事件要做的动作很简单,只是把input的值在控制台上打印出来就好。效果:
这个onchange是怎么触发的呢?经过实验,⼤致是以下⼏个步骤
⼀、当input捕获到焦点后,系统储存当前值
⼆、当input焦点离开后,判断当前值与之前存储的值是否不等,如果为true则触发onchange事件。
⾮IE可以回车触发
这个⾏为有点意思,即当input获取焦点后,不仅是焦点离开时会去校验当前的值与获取焦点临时存储值是否⼀致,还会在你敲回车的时候就去⼲这事。⽐如,我输⼊⼀些内容以后,我想让它触发onchange事件,但⼜不想使⽤⿏标点别处,于是敲回车它就触发⼀次onchange事件,当然,如果你敲回车的时候,
前后两次的值不相等才会触发,为了形象的展⽰这个案例,我们修改页⾯代码的input:
1<input type="text"onkeydown="console.log('from onkeydown : ' + event.keyCode);"onchange="console.log('from onchange : ' + this.value);"/>
效果如下:
这个例⼦在FireFox,Chrome,Safari下测试通过。
通过DOM对象赋值不会触发
虽然表⾯上感觉是当内容发⽣变化时,就会触发onchange事件,但是那只能在页⾯上操作。⽽如果通过dom对象去修改它的value则什么事也不会发⽣。
如:
通过dom对象赋值后,虽然值发⽣了变化,但并没有触发onchange事件,即使你像下⾯这样模拟真实输⼊也不管⽤
实际案例
假如,在实际中,我们有这么⼀个案例
1<input type="text"onchange="a(this);"/>
js代码:
1 2 3function a(obj){
jquery是什么选择器console.log(obj.value); }
这个功能在正常的页⾯操作下都没问题,但我希望通过dom对象改变value时也触发a()函数,那有很多种做法。
第⼀,⽐较简单粗暴,只要赋值⼿动触发
截图中右侧两⾏代码,就是先给input赋值,然后再执⾏a()函数。
第⼆,直接执⾏onchange触发事件
当我给input赋值后,顺便触发onchange事件。
第三,写⼀个专有赋值⽅法
以上两种,都是只要赋值就触发a()函数,不太友好,因为也许值并没有改变。
⽐如原来input中的值是a,但我给它赋值a以后本应该是赋值前与赋值后的两个值都相等就不能触发onchange函数,为了这个需求,我们可以写⼀个jQuery⽅法来实现,简单易⽤。
1
2(function($) {
3 4 5 6 7 8 9 10 $.fn.update = function(value){ $(this).each(function(){
if(value!=this.value){
this.value = value;
}
});
};
})(jQuery);
执⾏结果:
默认,input是空的,所以执⾏第⼀个update时 cccc != "" ⾃然就执⾏onchange,执⾏第⼆个update时, cccc == cccc 于是就不⾛onchange 事件了
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论