JS_事件的简介和常见事件的绑定_01
HTML事件可以是浏览器行为,也可以是用户行为。当这些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生,JS的事件驱动指的就是行为触发代码运行的这种特点
一、事件的绑定方式
- 通过元素的属性绑定 on***
- 通过DOM编程动态绑定
二、注意事项:
- 一个事件可以同时绑定多个函数
- 一个元素可以同时绑定多个事件
三、常见的事件
- 鼠标事件:onclick,ondbclick,onmouseover,onmousemove,onmouseleave
- 键盘事件:onkeydown,onkeyup
- 表单事件
代码:
<!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>function fun1(){console.log("单击了1")}function fun2(){console.log("单击了2")}function fun3(){console.log("双击了")}function fun4(){console.log("鼠标悬停了")}function fun5(){console.log("鼠标移动了")}function fun6(){console.log("鼠标离开了")}function fun7(){console.log("键盘按下了")}function fun8(){console.log("键盘抬起了")}</script></head>
<body><input type="button" value="按钮" onclick="fun1(),fun2()" ondblclick="fun3()"> <br><img src="hzw.jpeg" onmouseover="fun4()" onmousemove="fun5()" onmouseleave="fun6()"><br><input type="text" onkeydown="fun7()" onkeyup="fun8()" ></body>
</html>