dom事件对象、解绑事件、事件委托、页面加载、滚动事件、页面尺寸事件

1、e.type获取事件类型，例如click input focus

<input type="text">
<script>let input=document.querySelector('input');input.addEventListener('input',function (e) {console.log(e);//这个e就是一个对象// e.type获取事件类型，例如click input focusconsole.log(e.type);//input})</script>

还是同样的例子，把事件类型换成了keyup

2、e.code可以判断按下的是哪一个键

input.addEventListener('keyup',function (e) {// console.log(e);//enter// e.code可以判断按下的是哪一个键console.log(e.code);})

判断是否按了某个键

input.addEventListener('keyup',function (e) {console.log(e.code);// 判断是否按下了Enter键if (e.key==='Enter') {console.log('我按下了enter键');}
})

3、事件解绑

先写二个按钮，并获取

<button>事件解绑1</button>
<button class="btn">事件解绑2</button>
const btn=document.querySelector('button');
const btn2=document.querySelector('.btn');

on事件方式：直接使用null，就可以事件的解绑

// 绑定（点击）事件
btn.onclick=function(){alert('点击了');
}
// 解绑（点击）事件
// null是空对象
btn.onclick=null;

addEventListener方式，必须使用
removeEventListener(事件类型,事件处理函数，[获取捕获或者冒泡阶段])
匿名函数无法被解绑

const btn2=document.querySelector('.btn');
function fn() {alert('点击2');
}
btn2.addEventListener('click',fn);
btn2.removeEventListener('click',fn);

二者区别：
传统on注册 (LO)
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖，就可以实现事件的解绑
都是冒泡阶段执行的

事件监听注册 (L2)
语法:addEventListener(事件类型事件处理函数，是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
必须使用removeEventListener(事件类型事件处理函数，获取捕获或者冒泡阶段
匿名函数无法被解绑

4、事件委托

<ul><li>第1个孩子</li><li>第2个孩子</li><li>第3个孩子</li><li>第4个孩子</li><li>第5个孩子</li><p>我不需要变颜色</p>
</ul>
<script>// 需求：点到谁（指孩子），谁的颜色变红色// 利用冒泡：点到li 然后li冒泡到 ulconst ul=document.querySelector('ul');ul.addEventListener('click',function (e) {console.log(e);console.log(e.target);// 需求2：只有点到li才会变颜色if (e.target.tagName==='LI') {e.target.style.color='red'}})
</script>

5、阻止默认事件

<form action="https://www.baidu.com/"><input type="submit" value="注册">
</form>
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
<script>const form = document.querySelector('form');const a = document.querySelector('a');form.addEventListener('click',function (e) {// 阻止默认事件e.preventDefault();})a.addEventListener('click',function (e) {e.preventDefault();})
</script>

点击之后，不会跳转到新的页面

6、页面加载事件

<!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><script>const btn=document.querySelector('button');btn.addEventListener('click',function () {alert(12);})</script>
</head>
<body><button>点击</button>
</body>
</html>

把script写在上边会导致script无效

点击后，会报错

此时就需要页面加载函数，让页面其他部分先加载，script最后在执行

<script>window.addEventListener('click', function () {const btn = document.querySelector('button');btn.addEventListener('click', function () {alert(12);});});
</script>

再点击就能正常运行了

img.addEventListener('load',function () {// 等待图片加载完毕，在执行相关事件
})

这个速度更快！

7、页面滚动事件

<style>div{width: 200px;height: 200px;overflow: scroll;margin: 100px;}body{height: 3000px;}
</style>

<div>《方舟：生存进化》故事主要讲述，一群男女从在岸边醒来后，发现自己身处一个充满恐龙的神秘岛屿“ARK”。游戏中除了狩猎、资源搜刮、物品打造、种植、科研、调查技术和建造房子来抵抗炎热的白天，冰冷的夜晚，易变的天气系统，危险的野外和潜在的敌人等之外，玩家还必须面对其他玩家所扮演的幸存者，合作或者是相互厮杀。并且有80多种恐龙和其他史前生物，玩家们可以驯服这些庞大的生物，并利用它们来和更强的敌人战斗。当然恐龙并非岛上的危险生物，其他的玩家也正在组织自己的部落，积累各种资源和经验来建立庞大的村庄和城市，他们还能不断发展技术来跨越原始的石器时代并进入现代的电气时代，而且他们还会不断战斗来摧毁威胁到他们的人。
此外玩家们还需要通过策略战术来驯服游戏中出现的各种恐龙和其他原始生物，并利用他们来跨越海陆空甚至进入地下世界。玩家们可以利用本作中深入的角色扮演系统来充分打造自己角色的长处，并获得各种物品、技能和宠物等。玩家们还要同数以百计的其他玩家部落展开生存竞争，并最终发现“方舟(ARK)”的真正目的。 [3]
80多种恐龙使用各种策略去驯服、训练，同时还能繁殖恐龙和其它史前生物，这些生物生活在陆地、海洋、空气甚至地下洞窟等各色完整的生态系统中。除了探索一个庞大且具有生命力的史前环境，还要摸索出生存的方法，壮大自己，最终逃离方舟。 [1] </div>

const div=document.querySelector('div');
div.addEventListener('scroll',function () {console.log('我滚动了');// srocllTop被卷去的头部console.log(div.scrollTop);
})

// 获取整个html页面滚动了多少
window.addEventListener('scroll',function () {// 获取html页面// console.log(document.documentElement);console.log(`html滚动了${parseInt(document.documentElement.scrollTop)}px`);// 当页面滚动了100px以上。就让div显示if (parseInt(document.documentElement.scrollTop)>100) {div.style.display='block';}
})

8、页面尺寸事件

<!-- resize当页面尺寸发生变化的时候，就会触发这个事件 -->
<script>window.addEventListener('resize',function () {console.log('页面发生变化了');})
</script>

8.1、clientWidth、clientHeight获取元素的可见部分宽高(不包含边框，margin，滚动条等)

<style>div{width: 200px;height: 200px;padding: 10px;margin: 50px;background-color: pink;}
</style>
<div></div>

const div=document.querySelector('div');
console.log(div.clientWidth);

8.2、offset

不加border

        .one {height: 200px;width: 200px;background-color: pink;/* border: 10px solid red; */padding: 20px;/* margin: 10px; */}</style>
</head><body><div class="one"></div><script>const one=document.querySelector('.one');console.log(one.offsetWidth);</script>
</body>

把border的注释取消了

<style>*{padding: 0;margin: 0;}绝对定位的父盒子宽高都是300px，距离左边和上边都是50px.father{position: absolute;top: 50px;left: 50px;width: 300px;height: 300px;background-color: pink;}.son{width: 100px;height: 100px;background-color: red;margin: 10px;}</style>
</head>
<body><div class="father"><div class="son"></div></div><script>//获取元素let father=document.querySelector('.father');let son=document.querySelector('.son');// offsetLeft可算出自身可见区域到最近带有定位的盒子的距离// 如果祖先元素都没有定位，那么距离就是到html文档距离console.log("son.offsetLeft:"+son.offsetLeft);//10console.log("father.offsetLeft:"+father.offsetLeft);//50</script>
</body>

位置总结：