web前端全系列 教程
1839个小节阅读:2243.9k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
表单事件是在使用表单元素及输入框元素可以监听的一系列事件
input事件当<input>、<select>、<textarea>
的值发生变化时触发。对于复选框(<input type=checkbox>
)或单选框(<input type=radio>
),用户改变选项时,也会触发这个事件
input事件的一个特点,就是会连续触发,比如用户每按下一次按键,就会触发一次input事件。
xxxxxxxxxx
var username = document.getElementById("username");
username.oninput = function(e){
console.log(e.target.value);
}
select事件当在<input>、<textarea>
里面选中文本时触发
xxxxxxxxxx
// HTML 代码如下
// <input id="test" type="text" value="Select me!" />
var elem = document.getElementById('test');
elem.addEventListener('select', function (e) {
console.log(e.type); // "select"
}, false);
Change事件当<input>、<select>、<textarea>
的值发生变化时触发。它与input事件的最大不同,就是不会连续触发,只有当全部修改完成时才会触发
xxxxxxxxxx
var email = document.getElementById("email");
email.onchange = function(e){
console.log(e.target.value);
}
这两个事件发生在表单对象<form>
上,而不是发生在表单的成员上。
reset事件当表单重置(所有表单成员变回默认值)时触发。
submit事件当表单数据向服务器提交时触发。注意,submit事件的发生对象是<form>
元素,而不是<button>
元素,因为提交的是表单,而不是按钮
xxxxxxxxxx
<form id="myForm" onsubmit="submitHandle">
<button onclick="resetHandle">重置数据</button>
<button>提交</button>
</form>
xxxxxxxxxx
var myForm = document.getElementById("myForm")
function resetHandle(){
myForm.reset();
}
function submitHandle(){
console.log("提交");
}
实时效果反馈
1. 下列代码中,横线处应该填写的内容是:
xxxxxxxxxx
// 需求:用户每次输入都需要触发的事件
var username = document.getElementById("username");
username.___ = function(e){
console.log(e.target.value);
}
A select
B oninput
C onchange
D submit
答案
1=>B