大家好，欢迎来到IT知识分享网。
1. onchange事件
1.1 定义和用法
- onchange事件会在域的内容改变时发生
( 在元素值改变时触发)
1.2 支持该事件的HTML标签
<input type="text">,<select>,<textarea>1.3 支持该事件的JavaScript对象
fileUpload, select, text, textarea
1.4 onchange事件的触发条件
- 1.输入框的值发生改变，并且是由键盘或鼠标事件激发的（脚本触发无效）
- 2.输入框失去焦点
- 注意：事件触发发生在2，而不是1的过程中
1.5 浏览器支持
- 所有主流浏览器都支持 onchange 属性
1.6案例
<!DOCTYPE html> <html> <body> 请输入文本：<input type="text" name="txt" value="Hello" onchange="checkField(this.value)"> <script> function checkField(val){
alert("输入值已更改。新值是：" + val); } </script> </body> </html>2. onpropertychange事件
2.1 定义和用法
- 只要当前对象属性发生改变，都会触发事件
- 用法：实时监听文本框输入
2.2 浏览器支持
- IE专属
3. oninput 事件
3.1 定义和用法
- oninput 事件在用户输入时触发。
- 该事件在
<input>或<textarea>元素的值发生改变时触发。- 注意：该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化时立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于
<keygen>和<select>元素。
3.2 支持该事件的HTML标签
<input type="password">, <input type="search">, <input type="text"> 和 <textarea>3.３ 浏览器支持
3.4 案例
<!DOCTYPE html>
<html> <body> 输入您的名字: <input type="text" value="Mickey" oninput="myFunction()"> <script> function myFunction() {
alert("input 输入框值已发生变化。"); } </script> </body> </html>3.5 如何使用 addEventListener() 方法向 input 元素中添加 “oninput” 事件
<!DOCTYPE html> <html> <body> 输入您的名字: <input type="text" id="myInput" value="Mickey"> <script> document.getElementById("myInput").addEventListener("input", myFunction); function myFunction() {
alert("input 输入框值已发生变化。"); } </script> </body> </html>
- 注意：Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/110701.html
