change事件与select事件 change事件与select事件

作者：老薛撰写时间：2019年7月23日
change事件是jQuery表单事件。在元素中，和元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作。接下来我先说它的元素，它的元素分为三种：input元素、select元素、textarea元素。<br /> 1.input元素：<br /> 监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。<br /> 2.select元素：<br /> 对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发。<br /> 3.textarea元素：<br /> 多行文本输入框，当有改变时，失去焦点后触发change事件。<br /> 然后到input标签的change事件，大家先看下面这张截图1：<br /> <img alt="change事件与select事件" onload="javascript:ImgReSize(this)" src="https://img.it610.com/image/info8/37f26ca2dacc497ebbaf038aba817a78.jpg"/> <br /> 文章图片 <br /> <br /> 图1<br /> 大家也看到图1，它里面的e为事件，事件是用来记录一些事件发生时的相关信息的对象。事件只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件就被销毁。<br /> 然后我们在到select事件，select事件也是jQuery表单事件。而它的定义为：当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。<br /> select事件只能用于<input>元素与<textarea>元素。最后我们看下面这张截图2，也就是上面我所说select事件的内容：<br /> <img alt="change事件与select事件" onload="javascript:ImgReSize(this)" src="https://img.it610.com/image/info8/4f89903e61d44d82bef396984eed8654.jpg"/> <br /> 文章图片 <br /> <br /> <strong>【change事件与select事件】</strong>图2<br /> </p> <div class="dede_pages"><ul></ul></div> <div class="pcd_ad"> <center><div class="_ahwullr0ac"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6834461", container: "_ahwullr0ac", async: true }); </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script></center> </div> <div class="mbd_ad"> <div style=margin-top:10px;margin-bottom:10px;> <div class="_i7aftr79jl"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u5950612", container: "_i7aftr79jl", async: true }); </script>  <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script> </div> </div> <h3>推荐阅读</h3> <ul class="post-loop post-loop-default cols-0"> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3555000.html" title="vb.net操作硬件 vbnet implements"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="vb.net操作硬件 vbnet implements" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3555000.html"> <b>vb.net操作硬件 vbnet implements </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1274827.html" title="今日淘汰鸡全国价格今日鸡蛋价格"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="今日淘汰鸡全国价格今日鸡蛋价格" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1274827.html"> <b>今日淘汰鸡全国价格今日鸡蛋价格 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3036636.html" title="小宅vr眼镜好用吗小宅魔镜头盔使用说明"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="小宅vr眼镜好用吗小宅魔镜头盔使用说明" src="http://img.readke.com/230819/2332034K0-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3036636.html"> <b>小宅vr眼镜好用吗小宅魔镜头盔使用说明 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/980661.html" title="毕业季家长的感言美句家长对老师的感言简短"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="毕业季家长的感言美句家长对老师的感言简短" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/980661.html"> <b>毕业季家长的感言美句家长对老师的感言简短 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3134611.html" title="洛神花怎么养护洛神花怎么养能开花"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="洛神花怎么养护洛神花怎么养能开花" src="http://img.readke.com/230909/130420ND-0-lp.png"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3134611.html"> <b>洛神花怎么养护洛神花怎么养能开花 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3628409.html" title="鸿蒙3安全流畅，鸿蒙系统安全程度"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="鸿蒙3安全流畅，鸿蒙系统安全程度" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3628409.html"> <b>鸿蒙3安全流畅，鸿蒙系统安全程度 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2821037.html" title="2022三九天时间表三九天2021时间表图"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="2022三九天时间表三九天2021时间表图" src="http://img.readke.com/230724/0523105541-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2821037.html"> <b>2022三九天时间表三九天2021时间表图 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3563572.html" title="暗杀动作手机游戏，暗杀系列游戏大全"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="暗杀动作手机游戏，暗杀系列游戏大全" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3563572.html"> <b>暗杀动作手机游戏，暗杀系列游戏大全 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/4083445.html" title="ospf路由表分析,OSPF路由表的作用"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="ospf路由表分析,OSPF路由表的作用" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/4083445.html"> <b>ospf路由表分析,OSPF路由表的作用 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3132184.html" title="植发3000个毛囊面积图植发三千个毛囊单位有多少面积"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="植发3000个毛囊面积图植发三千个毛囊单位有多少面积" src="http://img.readke.com/230909/02195M4L-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3132184.html"> <b>植发3000个毛囊面积图植发三千个毛囊单位有多少面积 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2158386.html" title="美股怎么选美股怎么选股"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="美股怎么选美股怎么选股" src="http://img.readke.com/230520/0H6352615-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2158386.html"> <b>美股怎么选美股怎么选股 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3774262.html" title="世界word安卓,如何使用安卓用手机打印pdf?"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="世界word安卓,如何使用安卓用手机打印pdf?" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3774262.html"> <b>世界word安卓,如何使用安卓用手机打印pdf? </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2485245.html" title="关于重阳节的诗词重阳节有哪些诗词"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="关于重阳节的诗词重阳节有哪些诗词" src="http://img.readke.com/230610/12532524S-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2485245.html"> <b>关于重阳节的诗词重阳节有哪些诗词 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2968945.html" title="红豆薏米芡实茶哪些人不能喝"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="红豆薏米芡实茶哪些人不能喝" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2968945.html"> <b>红豆薏米芡实茶哪些人不能喝 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1834007.html" title="香辣帝王蟹的做法帝王蟹做法"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="香辣帝王蟹的做法帝王蟹做法" src="http://img.readke.com/230428/2046256362-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1834007.html"> <b>香辣帝王蟹的做法帝王蟹做法 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/110330Z332021.html" title="万像素|荣耀X30 MAX，不只有大！"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="万像素|荣耀X30 MAX，不只有大！" src="https://p0.ssl.img.360kuai.com/t0190ca370452578807.jpg?size=640x427"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/110330Z332021.html"> <b>万像素|荣耀X30 MAX，不只有大！ </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3696583.html" title="想减肥的人少吃鸡翅这些高热量食物减肥期间不要碰"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="想减肥的人少吃鸡翅这些高热量食物减肥期间不要碰" src="http://img.readke.com/231213/1A41J462-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3696583.html"> <b>想减肥的人少吃鸡翅这些高热量食物减肥期间不要碰 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3077229.html" title="郭德纲的麒麟剧社有发展前途吗？能不能最后收编主流京剧界？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="郭德纲的麒麟剧社有发展前途吗？能不能最后收编主流京剧界？" src="http://img.readke.com/230827/15020061N-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3077229.html"> <b>郭德纲的麒麟剧社有发展前途吗？能不能最后收编主流京剧界？ </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2573793.html" title="传统的汽配公司在干什么汽配公司属于什么行业"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="传统的汽配公司在干什么汽配公司属于什么行业" src="http://img.readke.com/230624/0H4146051-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2573793.html"> <b>传统的汽配公司在干什么汽配公司属于什么行业 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1181511.html" title="桌游黑暗之魂好玩吗黑暗之魂游戏介绍和攻略"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="桌游黑暗之魂好玩吗黑暗之魂游戏介绍和攻略" src="http://img.readke.com/230228/0G25962F-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1181511.html"> <b>桌游黑暗之魂好玩吗黑暗之魂游戏介绍和攻略 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> </ul> <p><br /><ul class="post-loop post-loop-list cols-4"><li><a href="/c/021T5L512022.html" title="JAVA（抽象类与接口的区别&重载与重写&内存泄漏）" target="_blank">JAVA（抽象类与接口的区别&重载与重写&内存泄漏） </a></li> <li><a href="/c/021T5L312022.html" title="Docker应用:容器间通信与Mariadb数据库主从复制" target="_blank">Docker应用:容器间通信与Mariadb数据库主从复制 </a></li> <li><a href="/c/021T5L292022.html" title="《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量" target="_blank">《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量 </a></li> <li><a href="/c/021T5K932022.html" title="第326天" target="_blank">第326天 </a></li> <li><a href="/c/021T5K912022.html" title="Shell-Bash变量与运算符" target="_blank">Shell-Bash变量与运算符 </a></li> <li><a href="/c/021T5IG2022.html" title="事件代理" target="_blank">事件代理 </a></li> <li><a href="/c/021T5I502022.html" title="逻辑回归的理解与python示例" target="_blank">逻辑回归的理解与python示例 </a></li> <li><a href="/c/021T5H912022.html" title="Guava|Guava RateLimiter与限流算法" target="_blank">Guava|Guava RateLimiter与限流算法 </a></li> <li><a href="/c/021T5H262022.html" title="我和你之前距离" target="_blank">我和你之前距离 </a></li> <li><a href="/c/021T5H232022.html" title="事件处理程序" target="_blank">事件处理程序 </a></li> </ul></p> <div class=entry-copyright> <p></p> </div> </div> <div class="entry-footer"> <div class="prev-next sb br mb clearfix"> <p class="post-prev fl ellipsis">上一篇：<a href='/c/1215364U62021.html'>ASP.NET|下拉框的改变触发另一个下拉框数据绑定</a> </p> <p class="post-next fr ellipsis">下一篇：<a href='/c/1215364UR021.html'>C#|C#数组</a> </p> </div> </div> </div> </article> </main> <aside class="sidebar"> <div class="widget widget_post_thumb"> <h3 class="widget-title"><span>更多...</span></h3> <ul> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/10293002162021.html" title="SpringBoot实现阿里云快递物流查询的示例代码"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="SpringBoot实现阿里云快递物流查询的示例代码" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/10293002162021.html" title="SpringBoot实现阿里云快递物流查询的示例代码">SpringBoot实现阿里云快递物流查询的示例代码</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0ZGD4492021.html" title="炒股如炒菜"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="炒股如炒菜" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/0ZGD4492021.html" title="炒股如炒菜">炒股如炒菜</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/09252455T2021.html" title="如何挑选生腰果（海南腰果怎么分？）"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="如何挑选生腰果（海南腰果怎么分？）" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/09252455T2021.html" title="如何挑选生腰果（海南腰果怎么分？）">如何挑选生腰果（海南腰果怎么分？）</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0Z21301R2021.html" title="相亲相爱的两宝"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="相亲相爱的两宝" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/0Z21301R2021.html" title="相亲相爱的两宝">相亲相爱的两宝</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/09101V4302021.html" title="梅花香自苦寒来"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="梅花香自苦寒来" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/09101V4302021.html" title="梅花香自苦寒来">梅花香自苦寒来</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0ZGC23H021.html" title="最美的风景只能自己去欣赏"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="最美的风景只能自己去欣赏" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/0ZGC23H021.html" title="最美的风景只能自己去欣赏">最美的风景只能自己去欣赏</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0Z91Q3X2021.html" title="开心的活着就挺好"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="开心的活着就挺好" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/0Z91Q3X2021.html" title="开心的活着就挺好">开心的活着就挺好</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/12303940U2021.html" title="4D习书之旅|4D习书之旅第10章"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="4D习书之旅|4D习书之旅第10章" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/12303940U2021.html" title="4D习书之旅|4D习书之旅第10章">4D习书之旅|4D习书之旅第10章</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0Z112U3R021.html" title="百度智能云天工物联网支持多种类数据传输，MQTT助力数据、语音、视觉应用智能化"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="百度智能云天工物联网支持多种类数据传输，MQTT助力数据、语音、视觉应用智能化" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/0Z112U3R021.html" title="百度智能云天工物联网支持多种类数据传输，MQTT助力数据、语音、视觉应用智能化">百度智能云天工物联网支持多种类数据传输，MQTT助力数据、语音、视觉应用智能化</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1121334N22021.html" title="使用git将本地代码提交到码云上去"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="使用git将本地代码提交到码云上去" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/1121334N22021.html" title="使用git将本地代码提交到码云上去">使用git将本地代码提交到码云上去</a></p> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="clearfix"> <div class="footer-col footer-col-logo"> </div> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"> <li class="menu-item menu-item-706"><a href="/baike/">生活百科</a></li> <li class="menu-item menu-item-706"><a href="/it/">it技术</a></li> </ul> <div class="copyright"> <p>Copyright © 2017-2022 锐客网 <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备11041112号-41</a> </p> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns"> </div> </div> </div> </div> </footer> <div class="action action-style-0 action-color-0 action-pos-1" style="bottom:15%;"> <div class="action-item gotop j-top"> <i class="web-icon wi action-item-icon"><svg aria-hidden="true"> <use xlink:href="#wi-arrow-up-2"></use> </svg></i></div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?79e4e485d34c6fc717489eaa10b314e3"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> <script>var _web_js={};</script> <script src="/skin/js/index.js"></script> </body> </html>