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

lxl211

已于 2023-02-23 23:11:47 修改

阅读量170

点赞数

分类专栏： js 文章标签：前端 javascript vue.js

于 2023-02-16 19:12:14 首次发布

本文链接：https://blog.csdn.net/lxllxl211/article/details/129068095

版权

js 专栏收录该内容

65 篇文章 0 订阅

订阅专栏

在这里插入图片描述

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 focus
            console.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冒泡到 ul
    const 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);//10
        console.log("father.offsetLeft:"+father.offsetLeft);//50
    </script>
</body>