34js学习第十七天DOM的事件对象-CSDN博客

本文链接：https://blog.csdn.net/liuyaoshun123456/article/details/124575490

## DOM的事件对象
- 事件自带的对象包含事件相关的一些属性

## 伪元素
- ::before 插入到子元素最前面
- ::after 插入到子元素最后面
- content 属性必须
字符编码
- 自定义样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01DOM的事件对象</title>
<style>
input{
display: none;
}
label::before{
content: "\2610";
/* content: ""; /
display: inline-block;
width: 20px;
height: 20px;
/ border-radius: 50%;
background: yellow; /
}
input:checked+label::before{
content: "\2611";
/ content: "√"; /
display: inline-block;
width: 20px;
height: 20px;
color: blue;
/ color: #fff;
background:red; */
}
</style>
</head>
<body>
<h1>01DOM的事件对象</h1>
<input type="checkbox" id="se">
<label for="se">哈哈哈哈</label>
</body>
<script>
// 01DOM的事件对象
document.οnclick=function(e){
// console.log(e);
// 浏览器兼容 IE
e=e||window.event;
// window.event IE浏览器
console.log(e);
}

document.οnkeydοwn=function(e){
console.log(e)
}

// 给函数的参数设置默认值
function func(a){
a=a||10;
console.log(a)
}
func();
func(20);

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02DOM的事件对象（键盘）</title>
</head>
<body>
<h1>02DOM的事件对象（键盘）</h1>
<input type="text">
</body>
<script>
// 02DOM的事件对象（键盘）

document.οnkeydοwn=function(e){
var e=e||window.event;
console.log(e)
// console.log(e.which)
}
// altKey 返回当事件被触发时,"ALT"是否被按下。
// ctrlKey 返回当事件被触发时,"CTRL"是否被按下。
// shiftKey 返回当事件被触发时,"SHIFT"是否被按下。
// metaKey 返回当事件被触发时,"MATE"是否被按下（Mac系统）。
// code 返回键盘的编码
// key 返回按键的标识符
// keyCode 返回按键的字符代码针对IE8以下的浏览器
// which 返回按键的字符代码
// target 返回事件作用的目标元素
// bubbles 是否具有冒泡属性
// cancelBubble 是否取消冒泡
// type 返回事件类型

document.getElementsByTagName("input")[0].οnkeydοwn=function(e){
var e=e||window.event;
console.log(e)
// e.cancelBubble=true
}

</script>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>03DOM的事件对象（鼠标）</title>
<style>
#box {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>

<body>
<h1>03DOM的事件对象（鼠标）</h1>
<div id="box">这是一个盒子</div>
</body>
<script>
// 03DOM的事件对象（鼠标）

// document.οnclick=function(e){
// var e=e||window.event;
// console.log(e)
// // console.log(e.which)
// }

// altKey 返回当事件被触发时,"ALT"是否被按下。
// ctrlKey 返回当事件被触发时,"CTRL"是否被按下。
// shiftKey 返回当事件被触发时,"SHIFT"是否被按下。
// metaKey 返回当事件被触发时,"MATE"是否被按下（Mac系统）。
// type 返回事件类型
// target 返回触发事件的目标元素
// bubbles 是否具有冒泡属性
// cancelBubble 是否取消冒泡
// button
// buttons
// which 返回按下的键的编码(1左 2中 3右)

// clientX
// clientY
// offsetX
// offsetY

// document.onmousedown = function (e) {
// var e = e || window.event;
// console.log(e)
// // console.log(e.which)
// }
document.getElementById("box").onmousedown = function (e) {
var e = e || window.event;
console.log(e)
// console.log(e.offsetX,e.offsetY)
// console.log(e.clientX,e.clientY)
// e.cancelBubble = true
}
</script>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04CSS的content属性</title>
<style>
{
margin: 0;
padding: 0;
list-style: none;
}
#box,#box2{
width: 200px;
height: 200px;
background: yellow;
}
#box::before{
/ content: "你好"; /
/ content: url("homework/img/0.webp"); /
content: "";
display: block;
width: 50px;
height: 50px;
background: red;
color: #fff;
}
/ 伪元素 /
li{
width: 100px;
height: 100px;
background: pink;
margin: 10px;
float: left;
}
ul::after{
content: "";
display: block;
clear: both;
}
input{
display: none;
}
label::before{
/ content: "\2610"; /
content: "";
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid red;
/ color: blue; /
/ border: 2px solid blue;
text-align: center;
line-height: 20px; /
}
input:checked+label::before{
/ content: "\2611"; /
content: "√";
display: inline-block;
color: #fff;
background: red;
text-align: center;
line-height: 20px;
}
/ #swim+label{
color: yellow;
} */
</style>
</head>
<body>
<h1>04CSS的content属性</h1>
<input type="checkbox" id="swim">
<label for="swim">游泳</label>
<input type="checkbox" id="run">
<label for="run">跑步</label>
<input type="checkbox" id="sing">
<label for="sing">唱歌</label>
<div id="box">
<p>这是段落</p>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>
<div id="box2"></div>
</body>
<script>
// 04CSS的content属性

</script>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>04鼠标事件中不同坐标的区别</title>
<style>
*{
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 100px;
left: 100px;
}
#box2{
width: 2000px;
height: 10000px;
}
</style>
</head>

<body>

<div id="box"></div>
<div id="box2"></div>
</body>
<script>
// 04鼠标事件中不同坐标的区别
var oBox=document.getElementById("box");

// 添加鼠标按下事件
// oBox.οnmοusedοwn=function(e){
// var e=e||window.event;
// console.log(e);
// }

// clientX: 返回鼠标指针的坐标(可视区域)
// clientY:
// oBox.οnmοusedοwn=function(e){
// var e=e||window.event;
// console.log(e);
// // console.log(e.clientX,e.clientY);
// }

// pageX: 返回鼠标指针的坐标(整个网页)
// pageY:
// =clentX+滚动条卷去的部分
// oBox.οnmοusedοwn=function(e){
// var e=e||window.event;
// // console.log(e);
// console.log(e.pageX,e.pageY);
// console.log(e.clientX,e.clientY);
// }

// screenX: 返回鼠标指针的坐标(整个屏幕区域)
// screenY:
// oBox.οnmοusedοwn=function(e){
// var e=e||window.event;
// // console.log(e);
// console.log(e.screenX,e.screenY);
// }

// offsetX: 返回鼠标指针的坐标(触发事件的元素)
// offsetY:
oBox.οnmοusedοwn=function(e){
var e=e||window.event;
// console.log(e);
console.log(e.offsetX,e.offsetY);
console.log(e.pageX,e.pageY);
}

// layerX:
// layerY:

// x:
// y:

</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>05鼠标跟随效果</title>
<style>
{
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 0px;
left: 0px;
}
/ #box2{
width: 2000px;
height: 10000px;
} */
</style>
</head>

// 添加鼠标移动事件
document.οnmοusemοve=function(e){
var e=e||window.event;
// console.log(e.clientX,e.clientY);
oBox.style.left=e.clientX+"px";
oBox.style.top=e.clientY+"px";
}

</script>

</html>