<!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>1</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: orange;
}
.wrap {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<!-- 分别给盒子添加对应的事件 -->
<div class="box" onclick="myClick()"></div>
<div class="wrap" id="myWrap"></div>
<body>
<script>
//函数与事件之间的关系
//需求:点击box控制台输出,我被点击了
function myClick() {
console.log('我是box我被点击了');
}
myWrap.onclick = function () {
console.log('我是wrap我被点击了');
}
// 单击事件onclick,双击事件ondblick
</script>
</body>
</html>
常用事件:
单击事件onclick
双击事件ondblick
鼠标滑过事件 onmouseover
移动事件 onmusemove
鼠标抬起事件 onmouseup
输入事件 oninput
输入内容更改触发事件 onchange
键盘摁下事件 onkeydown
键盘的抬起 onkeyup