Web HTML 内容改变的触发事件方式

Web HTML 内容改变的触发事件方式

1、onpropertychange //会在元素的属性改变时,实时触发事件。但当元素 disable=true 时不会触发。
缺点：IE 下支持，其他浏览器不支持，可用 oninput 来解决。

2、onchange //在域内容改变时触发（值改变且失去焦点时触发）。支持的标签有 、、<select>、<keygen>。</span><br><span style="font-size: 16px">缺点：通过js代码改变相应的值时不会触发，可通过调用其change 的function() 或者调.change()方法来解决。 </span></p> <pre class="brush:html;gutter:true;"><span style="font-size: 16px"><input type="text" id="TaoRoy" onchange="function()"></span></pre> <p><span style="font-size: 16px"><strong>3、oninput</strong></span><br><span style="font-size: 16px">oninput在<input>或<textarea>的值发生改变时触发，不需要等到元素失去焦点，是实时的。它是HTML5的事件，可用于检测文本类输入框的值。</span><br><span style="font-size: 16px">缺点：1）通过修改脚本中的值时不会触发. 2）从浏览器下拉提示框里选取值时不会触发. 3）IE9 以下不支持，但 IE9以下可用onpropertychange 事件代替。</span></p> <pre class="brush:html;gutter:true;"><span style="font-size: 16px"><input type="text" oninput="function()"></span></pre> <p><span style="font-size: 16px"><strong>4、addEventListener</strong> //用于向指定元素添加事件方法</span><br><span style="font-size: 16px">语法： element.addEventListener(event, function, useCapture)</span><br><span style="font-size: 16px">注意：可使用removeEventListener()方法来移除添加的事件。IE9以下不支持，可用attachEvent代替。</span></p> <p><span style="color: rgba(136, 136, 136, 1)">创建时间：2022.04.19　　更新时间：</span></p> </div> <!--conend--> <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid24738-0.html' class='tagbtn' target='_blank'>WebHTML</a><a href='/t/etagid1162-0.html' class='tagbtn' target='_blank'>web</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div> <!--xg--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-566527.html">【OF框架】定义框架标准WebApi，按照规范返回状态信息及数据信息</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-566066.html">JavaWeb的三大作用域</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565613.html">nginx下配置多个web服务</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565292.html">一、Asp.Net Core WebAPI——修改默认监听端口</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565232.html">WEBAPI AuthenticateAttribute 基于Basic 验证</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564705.html">腾讯云服务器简单配置web项目</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564641.html">Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564626.html">HBuilder webApp热更新（在线升级）的实现</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564773.html">nginx反向代理websocket wss或ws端口</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564568.html">webrtc编译</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563694.html">nodejs 一个简单的web服务器，用于前端自己快速测试部署</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563842.html">web框架们~Django~Flask~Tornado</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div> <!----> <!----> </div> <!--xgend--> </div> <div class="col-lg-3 col-12 p-0 ps-lg-2"> <!--box--> <!--boxend--> <!--<div class="p-2"></div>--> <!--box--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div> <!--box end--> </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>