实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单事件</title>
</head>
<body>
<!--
1. 表单值的获取: name属性
2. onchange()事件,当值发生改变时触发, 不同的控件,触发时间时机不同
2.1: text/textarea , 在输入完成失去焦点时,内容有更新就会触发
-->
<h3>登录</h3>
<form action="" id="login">
<p>
<label for="username"></label>用户名:</label>
<!-- 对于表单,其实还有一个比id更重要的属性:name -->
<!-- name是用于将前端数据提交到服务器时的数据标识符 -->
<!-- 所以访问,再方便的方式是name,并不是id -->
<input type="text" id="username" name="username" value="admin">
</p>
<!-- 单选按钮 -->
<p>
<input type="radio" name="gender" value="male" id="male" checked><label for="male">男</label>
<input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
</p>
<!-- 复选框 -->
<p>
<input type="checkbox" name="hoppy[]" value="game" id="game" checked><label for="game">打游戏</label>
<input type="checkbox" name="hoppy[]" value="book" id="book"><label for="book">读书</label>
</p>
<!-- 下拉框 -->
<p>
<select name="area" value="与option中的selected一致">
<!-- 默认选中第一项 -->
<option value="shushan">蜀山区</option>
<option value="luyang">庐阳区</option>
<option value="baohe" selected>包河区</option>
</select>
</p>
</form>
<script>
var login = document.getElementById('login');
console.log(login.username.value); // 'admin'
//删除id属性,会发现仍然可以取到值,说明我们不是根据id取值,而是根据name来取值
// 为每个控件取一个id比较麻烦,也不是每个控件都会有id,但是每个控制必定会有一个name属性
// 所以,用name属性来选择表单控件元素是非常棒的解决方案,document有专门的方法
// onchange事件
// 获取文本框变化的内容
login.username.onchange = function () {
// 失去焦点,并且内容发生变化才会触发,没有变化不会发生,2条件缺一不同
console.log(login.username.value);
}
// 获取单选按钮变化
// 按常规思维,这样得到任何数据的
login.gender.onchange = function () {
console.log(login.gender.value);
}
// 因为gender是一组数组,返回是一个集合,不是一个单值
console.log(login.gender);
console.log(login.gender.length);
console.log(login.gender[0].value);
console.log(login.gender[1].value);
// 我们应该将onchange事件分别添加到每一个单选按钮上
for (var i = 0; i < login.gender.length; i++) {
login.gender[i].onchange = function () {
// this是发生事件的当前元素(上下文对象)
// 重复点击一个按钮不会触发,只有改变选择才会有效
console.log(this.value);
}
}
// 复选框与单选按钮是类似的,也是返回一组相关元素
for (var i = 0; i < login['hoppy[]'].length; i++) {
login['hoppy[]'][i].onchange = function () {
// this是发生事件的当前元素(上下文对象)
// 重复点击一个按钮不会触发,只有改变选择才会有效
console.log(this.value);
}
}
// 下拉列表select中的name当前值,就是有selected属性的option中的value值
// 当前selected属性添加到了第3项上,第一项加也不加是一样的,默认就是它
console.log(login.area.value);
login.area.onchange = function () {
console.log(this.value);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
