1. Click event
<body>
<input type="text" id="name">
</body>
<script>
//双击清空
let name = document.getElementById('name');
name.ondblclick=function () {
this.value=''
}
</script>
After double-clicking:
2, focus event
<body>
姓名：<input type="text" id="name"><span id="sp"></span>
</body>
<script>
//假设：数据库已经有tom，提示用户名已经存在
document.getElementById('name').onblur=function () {
if (this.value=='tom'){
document.getElementById("sp").innerHTML='用户名已经存在'
}else {
document.getElementById('sp').innerHTML=''
}
}
</script>
3. Load event
<script>
//窗口内容加载完毕才执行函数体的内容
window.onload=function () {
console.log(document.getElementById('name').value);
}
</script>
<body id="body">
<input type="text" id="name" value="貂蝉">
</body>
4. Mouse events
<body>
<div id="div1" style="width: 200px;height: 200px;background-color: #e67318"></div>
</body>
<script>
let div1 = document.getElementById('div1');
div1.onmouseover=function () {
console.log('鼠标进来了')
}
div1.onmouseout=function () {
console.log("鼠标出去了")
}
</script>
5. Keyboard events
<body>
<form action="4,鼠标事件.html" id="form">
姓名：<input type="text" id="name"><br>
密码：<input type="password" id="psw">
</form>
</body>
<script>
let name = document.getElementById('name');
let psw = document.getElementById('psw');
let form = document.getElementById('form');
//1，姓名输入框中，回车，光标自动进入密码输入框中
name.onkeypress=function(){
let e = window.event; //定义一个事件
console.log(e.keyCode);
if (e.keyCode==13){
//13表示回车键
psw.focus()//让输入框获取焦点
}
}
//2，密码输入框中回车，自动提交
psw.onkeypress=function () {
let e = window.event;
if (e.keyCode==13){
//让表单提交
form.submit()
}
}
</script>
Values corresponding to commonly used keyboard keys
6, the drop-down box event
<body>
请选择您的武器:
<select name="" id="weapon">
<option value="航母">航母</option>
<option value="歼20">歼20</option>
<option value="歼15">歼15</option>
<option value="核潜艇">核潜艇</option>
<option value="坦克">坦克</option>
<option value="M762">M762</option>
<option value="榴弹炮">榴弹炮</option>
</select>
</body>
<script>
let weapon = document.getElementById('weapon');
weapon.onchange=function () {
console.log(weapon.value);//选择后，输出
}
</script>
7, the text box event
<body>
<textarea name="" id="tt" cols="30" rows="10">
hello world
</textarea>
</body>
<script>
document.getElementById('tt').onselect=function () {
console.log(this.value); //鼠标选中文本框的内容，并输出
}
</script>
8, form events
<body>
<form action="7,文本框事件.html" id="form1" onsubmit="return fun()" onreset="fun1()">
姓名：<input type="text" id="name" value="貂蝉">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
<script>
//提交事件
document.getElementById('form1').onsubmit=function () {
if (document.getElementById('name').value.trim()==''){
return false
}
}
function fun1() {
console.log(1)
console.log(2)
}
function fun() {
if (document.getElementById('name').value.trim()==''){
return false
}
}
</script>
After clicking submit, jump to the text box event. After
clicking reset, return to the original state of the text box Diao Chan
