表单事件
1.focus 元素获得焦点时触发
2.blur 元素失去焦点时触发
3.submit()提交表单
4.change 当input、textarea元素value值改变且失去焦点时,select元素选项改变时触发
5.input 当input、textarea元素value值改变同步触发事件,select元素选项改变时触发
change和input的区别
change:value发生改变,并失去焦点时触发
input: 只要value发生变化就触发
<!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>表单事件</title>
</head>
<body>
<form action="http://www.csdn.net">
<label for="">姓名</label>
<input id="name" type="text" name="name">
</form>
<button>点我</button>
</body>
<script>
var iptName = document.getElementById('name');
// 获取焦点
iptName.onfocus = function() {
console.log("我被点了");
}
// 失去焦点
iptName.onblur = function() {
console.log("我好想出去呀!");
}
// submit()
var form = document.querySelector("form");
var btn = document.querySelector("button");
btn.onclick = function() {
form.submit(); // 相当于 <input type='submit' />
}
// change &&&& input
iptName.onchange = function() {
console.log('change');
}
iptName.oninput = function() {
console.log('input');
}
// change和input的区别
// change:value发生改变,并失去焦点时触发
// input: 只要value发生变化就触发
锚点案例
<!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>锚点</title>
<style>
* {
ma