HTML之JavaScript常见事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
事件：本质是行为，用户的行为或者浏览器的行为；事件发生指的是处罚js函数执行
事件的三要素：事件源、事件、事件处理程序
事件的绑定：
1.通过元素的属性绑定 on***
2.通过DOM编程动态绑定
注：
1.一个事件可以绑定多个函数；eg：onclick="show(),show1()
2.一个元素可以绑定多个事件 eg：onclick="show()" ondblclick="show2()"
常见的事件：
1.鼠标事件
onclick：单击事件
ondblclick：双击事件
onmouseover：鼠标移入事件
onmouseout：鼠标移出事件
onmousemove：鼠标移动事件
onmousedown：鼠标按下事件
onmouseup：鼠标抬起事件
2.键盘事件
onkeydown：键盘按下事件
onkeyup：键盘抬起事件
onkeypress：键盘按下并抬起事件
3.表单事件
onfocus：获得焦点事件
onblur：失去焦点事件
onchange：内容改变事件
onsubmit：表单提交事件
onreset：表单重置事件
*/
function show() {
console.log('hello,按下');
};
function show1() {
console.log('hello1,抬起');
};
function show2() {
console.log('双击');
};
function show3() {
console.log('鼠标移入');
};
function show4() {
console.log('鼠标移出');
};
function show5() {
console.log('鼠标移动');
};
</script>
</head>
<body>
<input type="button" value="按钮" onclick="show(),show1()" ondblclick="show2()">
<img src="https://www.baidu.com/img/bd_logo1.png" alt="" onmouseover="show3()" onmouseout="show4()" onmousemove="show5()">
<input type="text" onkeydown="show()" onkeyup="show1()">
</body>
</html>