关于js_表单事件的介绍与使用 - 码农知识堂

关于js_表单事件的介绍与使用
js_表单事件
- 表单内元素事件
  - input事件
    
    当,</code> 的值发生变化时触发。对于复选框（ <code><input type=checkbox></code> ）或单选框（ <code><input type=radio></code> ），用户改变选项时，也会触发这个事件。</p> <p>特点：连续触发，比如用户每按下一次按键，就会触发一次input事件。</p> </li></ul> <ul><li> <p>select事件</p> <p>当在<code><input></code>,<code><textarea></code>里面选中文本时触发</p> </li></ul> <ul><li> <p>change事件</p> <p>当<code><input></code>,<code><select></code>,<code><textarea></code>的值发送改变时触发。不会连续触发，只有失焦或按回车才会触发！</p> </li></ul></li></ul> <ul><li> <p>表单元素事件</p> <ul><li> <p>reset事件</p> <p>重置数据，（所有表单成员变回默认值）</p> </li></ul> <ul><li> <p>submit事件</p> <p>当表单数据向服务器提交时触发，注意，submit事件的发生对象是元素，而不是元素，因为提交的是表单，而不是按钮</p> </li></ul></li></ul> <p> <h3><a name="t1"></a>实例：</h3> <pre data-index="0" class="set-code-hide" name="code"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="p"> <br> <input type="text" id="p1"> <br> <form action="我的服务器" name="myform"> <input type="text" name="username"> <button οnclick="resethandle">重置</button> <button οnclick="submithandle">提交</button> </form> <script> var p = document.getElementById('p'); var p1 = document.getElementById('p1'); p.oninput = function(e) { console.log(e.target.value); } p.onselect = function() { console.log('输入框里面有内容被选中了！'); } p1.onchange = function(e) { console.log(e.target.value); } var myform = document.getElementsByTagName('myform'); function resethandle() { myform.reset(); } function submithandle() { myform.submit(); } </script> </body> </html><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div></pre> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1117383">遨博机械臂——末端工具ROS驱动</a> <br /> <a href="/Article/Index/1389335">恢复受感染的数据：如何应对.360勒索病毒的策略</a> <br /> <a href="/Article/Index/1229630">SaaS CRM系统的优势，与本地部署相比哪个更方便？</a> <br /> <a href="/Article/Index/1466002">C语言绘图</a> <br /> <a href="/Article/Index/1130787">爬虫软件是什么意思</a> <br /> <a href="/Article/Index/997840">linux篇【7】：进程程序替换</a> <br /> <a href="/Article/Index/1285875">【学习笔记】「JOI Open 2022」长颈鹿</a> <br /> <a href="/Article/Index/1267995">【TypeScript】TypeScript 数据类型</a> <br /> <a href="/Article/Index/1391675">Kotlin类的定义、构造函数、封装、继承和多态</a> <br /> <a href="/Article/Index/932516">Shopee市场爆单难？找准选品逻辑方式</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/qq_55961861/article/details/126352392 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>