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
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事件了
jquery -- onchange的更多相关文章
- 使用JQuery UI selectmenu, onchange事件失效
今天, 在用jQuery UI的一套东西是发现<select class="dropmenu" onchange="do();"></sele ...
- 为什么Jquery对input file控件的onchange事件只生效一次
今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...
- Jquery对input file控件的onchange事件只生效一次的解决方案
1.原始方法:把事件写在file控件的onchange=""里面: 2.Jquery方法一: $('#fileId').live('change',function(){ //逻辑 ...
- JQuery EasyUI Combobox的onChange事件
html中的select 的change事件 <select id="consult_province" name="consult_province" ...
- jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)
参考学习: 第一篇:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 第二篇:http://www.jb51.net/a ...
- jquery chosen onchange 值改变时触发方法
jquery chosen onchange 值改变时触发方法如下:$(".chzn-select").chosen().on("change", functi ...
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
<script src="jquery.min.js" type="text/javascript"></script> <scr ...
- JQuery EasyUI内Combobox的onChange事件
1.原始方法 我想写个html代码的都对下拉选择标签select不陌生,关于这个标签,在不加任何渲染的情况下,想要触发其onchange事件是很简单的一件事情,如下: <select id=&q ...
- jquery之onchange事件2
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
随机推荐
- node 服务器开发必备神器 —— nodemon
nodemon 官方网站:http://nodemon.io/ github地址:https://github.com/remy/nodemon/ 简介:Nodemon 是一款非常实用的工具,用来监控 ...
- jenkins 发送邮件失败
jenkins 配置发送邮件,发送测试邮件,邮件发送失败: Failed to send out e-mail javax.mail.MessagingException: Could not con ...
- CentOS7添加开机启动服务/脚本(延用CentOS6方法)
一.添加开机自启服务 在centos7中添加开机自启服务非常方便,只需要两条命令(以Jenkins为例): systemctl enable jenkins.service #设置jenkins服务为 ...
- Java:HttpClient篇,Cookie概述,及其在HttpClient4.2中的应用
1. Cookie 概述 Cookie是什么? Cookie 是一小段文本信息,伴随着用户请求和页面在 Web 服务器和浏览器之间传递.Cookie 包含每次用户访问站点时 Web 应用程序都可以读取 ...
- C++ 链接Mysql 函数介绍
通过MySQL自己的API函数进行连接 1.使用API的方式连接,需要加载mysql的头文件和lib文件.在VS2010的附加包含目录中添加\MySQL\MySQL Server 5.1\includ ...
- kernel生成针对x86架构的tags和cscope数据库
最近下载了kernel的最新源码4.15版,但下载后的linux内核不仅包含了x86架构的函数还包含了如:arm.powerPC等等其他架构的函数,如果直接生成tags文件,将来查找时,多种架构的同名 ...
- JS教程:window.location使用方法的区别
介绍了window.location使用方法的区别. window.location.href=&http://www.jbxue.com/javascript/ldquo;url”:改变ur ...
- 【Android】5.7 图片库(Galery)
分类:C#.Android.VS2015: 创建日期:2016-02-07 一.简介 图库(也叫画廊)是一个布局小部件,用于在可水平滚动的列表中显示每一副图片,当前所选的图片将置于视图的中心. 注意: ...
- 如何创建自己的ruby gem包
编写一个最简单的例子 1. 建好如下文件夹 注意:lib目录下必须有个和你gem名字一样的rb文件. $ cd hola $ tree . ├── hola.gemspec └── lib └── h ...
- C# 获取FormData数据
通常的方法是你创建一个 FormData 对象.然后你使用append方法来加入任何额外的key和他们的值.就像这样: var form = new FormData(); form.append(& ...