<!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>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: fuchsia;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
//需求：点击盒子之后 弹窗内容 马上吃饭 alert("马上吃饭")
//标签.事件类型 = fucntion(){要执行的代码}
//1.获取标签
var oDiv = document.getElementById("box");
//2.绑定事件----onclick点击事件
oDiv.onclick = function(){
//3.要执行的代码
//alert("马上吃饭")
console.log("单击")
}
//3.双击事件
oDiv.ondblclick = function(){
alert("双击");
}
// //4.鼠标移入
// oDiv.onmouseover = function(){
// console.log("移入")
// }
// //5.鼠标移出
// oDiv.onmouseout = function(){
// console.log("移出")
// }
//6.鼠标移动
oDiv.onmousemove = function(){
console.log("移动")
}
//7.鼠标按下
oDiv.onmousedown = function(){
console.log("按下")
}
//8.鼠标抬起
oDiv.onmouseup = function(){
console.log("抬起")
}
//9.右键显示菜单
oDiv.oncontextmenu = function(){
console.log("显示右击菜单")
}
//10.鼠标移入
oDiv.onmouseenter = function(){
console.log("移入123")
}
//11.鼠标移出
oDiv.onmouseleave = function(){
console.log("移出123")
}
</script>
</body>
</html>
3486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
