博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery -- onchange
阅读量:7172 次
发布时间:2019-06-29

本文共 1552 字,大约阅读时间需要 5 分钟。

触发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
3
function
a(obj){
    
console.log(obj.value);
}

这个功能在正常的页面操作下都没问题,但我希望通过dom对象改变value时也触发a()函数,那有很多种做法。

第一,比较简单粗暴,只要赋值手动触发

截图中右侧两行代码,就是先给input赋值,然后再执行a()函数。

第二,直接执行onchange触发事件

当我给input赋值后,顺便触发onchange事件。

第三,写一个专有赋值方法

以上两种,都是只要赋值就触发a()函数,不太友好,因为也许值并没有改变。

比如原来input中的值是a,但我给它赋值a以后本应该是赋值前与赋值后的两个值都相等就不能触发onchange函数,为了这个需求,我们可以写一个jQuery方法来实现,简单易用。

1
2
3
4
5
6
7
8
9
10
(
function
($) {
     
$.fn.update =
function
(value){
        
$(
this
).each(
function
(){
            
if
(value!=
this
.value){
                
this
.value = value;
                
this
.onchange();
            
}
        
});
     
};
})(jQuery);

执行结果:

默认,input是空的,所以执行第一个update时 cccc != "" 自然就执行onchange,执行第二个update时, cccc == cccc 于是就不走onchange事件了

转载于:https://www.cnblogs.com/hf8051/p/4465990.html

你可能感兴趣的文章
2015.7.29 第十三、十四课 jq实例(磁力图片、轮播图、腾讯课堂菜单、可弹出红色菜单、砸蛋游戏)...
查看>>
重建二叉树 (剑指offer第六题)
查看>>
爬虫基础 pyquery 详解
查看>>
QT creator+OpenCV2.4.2+MinGW 在windows下开发环境配置
查看>>
Allegro PCB Design GXL (legacy) 设置十字大光标
查看>>
数据结构--图的定义和存储结构
查看>>
[C#参考]委托机制
查看>>
linux常用命令
查看>>
ava中普通代码块,构造代码块,静态代码块区别及示例
查看>>
自然杂志上的影评
查看>>
MATLAB制作符合IEEE标准的图插入Latex
查看>>
#HTTP协议学习# (三)摘要认证
查看>>
#HTTP协议学习# (九)cookie
查看>>
sql语句-6-更新数据
查看>>
SQL Server 存储过程
查看>>
Appium自动化测试1 - 安装部署
查看>>
广州.NET微软技术俱乐部微信群各位技术大牛的blog
查看>>
CCLayerColor 用法
查看>>
js中基本包装类型
查看>>
ssh-keygen设置无密码登录
查看>>