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/4076875.html" title="苹果相机怎么关闭声音，苹果iphone5s照相音量如何关闭"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="苹果相机怎么关闭声音，苹果iphone5s照相音量如何关闭" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/4076875.html"> <b>苹果相机怎么关闭声音，苹果iphone5s照相音量如何关闭 </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/1321397.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/1321397.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/3173829.html" title="迷糊的妈妈作文500字我的糊涂妈妈作文"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="迷糊的妈妈作文500字我的糊涂妈妈作文" src="http://img.readke.com/230921/2051215L7-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3173829.html"> <b>迷糊的妈妈作文500字我的糊涂妈妈作文 </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/3770780.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/3770780.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/4001206.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/4001206.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/2526802.html" title="2023银联瑞幸咖啡5折券活动时间瑞幸银联"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="2023银联瑞幸咖啡5折券活动时间瑞幸银联" src="http://img.readke.com/230615/0625133530-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2526802.html"> <b>2023银联瑞幸咖啡5折券活动时间瑞幸银联 </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/2996458.html" title="心理小常识"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="心理小常识" src="http://img.readke.com/230814/120S02127-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2996458.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/1170062.html" title="鱼塘驱蛇的方法鱼塘驱蛇的介绍"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="鱼塘驱蛇的方法鱼塘驱蛇的介绍" src="http://img.readke.com/230227/100HQL7-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1170062.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/2714852.html" title="如何链接隐藏的无线网？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="如何链接隐藏的无线网？" src="http://img.readke.com/230713/11321933Z-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2714852.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/10122S3412021.html" title="使用Cloudflare和notion搭建自己的博客"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="使用Cloudflare和notion搭建自己的博客" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/10122S3412021.html"> <b>使用Cloudflare和notion搭建自己的博客 </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/2462004.html" title="卡巴斯基安装失败怎么办？卡巴斯基安装错误的原因和解决方法"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="卡巴斯基安装失败怎么办？卡巴斯基安装错误的原因和解决方法" src="http://img.readke.com/230608/0S61910b-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2462004.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/1435775.html" title="桂花荷叶茶的做法怎么做桂花荷叶茶"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="桂花荷叶茶的做法怎么做桂花荷叶茶" src="http://img.readke.com/230407/045605H10-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1435775.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/0Q3A0E2021.html" title="医生|50岁男子高热不退，确诊艾滋后告诉医生，“一直抱有侥幸心理”"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="医生|50岁男子高热不退，确诊艾滋后告诉医生，“一直抱有侥幸心理”" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/0Q3A0E2021.html"> <b>医生|50岁男子高热不退，确诊艾滋后告诉医生，“一直抱有侥幸心理” </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/092624E392021.html" title="pdd|从一机难求到如今大降价，红米与华为这两款手机，成为了超值选择"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="pdd|从一机难求到如今大降价，红米与华为这两款手机，成为了超值选择" src="https://p0.ssl.img.360kuai.com/t01260873b2d3b5bd29.jpg?size=1342x710"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/092624E392021.html"> <b>pdd|从一机难求到如今大降价，红米与华为这两款手机，成为了超值选择 </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/3208220.html" title="天津2023年4月自考网络助学综合测验考试通知"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="天津2023年4月自考网络助学综合测验考试通知" src="http://img.readke.com/231009/04243913a-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3208220.html"> <b>天津2023年4月自考网络助学综合测验考试通知 </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/3518300.html" title="空调显示h5什么问题,来看看抽真空的必要性"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="空调显示h5什么问题,来看看抽真空的必要性" src="http://img.readke.com/231122/0615591V6-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3518300.html"> <b>空调显示h5什么问题,来看看抽真空的必要性 </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/1172615.html" title="1985年属相 1985年出生的人性格"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="1985年属相 1985年出生的人性格" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1172615.html"> <b>1985年属相 1985年出生的人性格 </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/2265037.html" title="路由器的默认网关是多少详情"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="路由器的默认网关是多少详情" src="http://img.readke.com/230527/005IHL5-0-lp.png"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2265037.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/4040678.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/4040678.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/1574300.html" title="炒股资金密码怎么改"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="炒股资金密码怎么改" src="http://img.readke.com/230415/1144443258-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1574300.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>