【零基础】学JS之APIS

最新推荐文章于 2024-09-14 19:44:09 发布

码喽小郑

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量668

点赞数 30

分类专栏：零基础学JS 文章标签： javascript

本文链接：https://blog.csdn.net/m0_74948742/article/details/140402490

版权

零基础学JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

前言

本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习web APIS的过程，俗话说，好记性不如烂笔头，小郑喜欢在学习的过程中记笔记，记下自己在学习过程中难以理解的知识点，反复练习，加深印象，希望广大网友一起监督学习，互相进步!

事件对象

事件对象是什么？

也是个对象，这个对象里有事件触发时的相关信息例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

如何获取？

在事件绑定的回调函数的第一个参数就是事件对象一般命名为event、ev、e

元素.addEventListener('click',function(e){
})

部分常用属性

type 获取当前的事件类型

clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置

pageX/pageY 获取光标相对于文档页面左上角的位置

key 用户按下的键盘键的值现在不提倡使用keyCode

案例(跟着鼠标移动的图片):

<!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>
        img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <img src="./images/tianshi.gif" alt="">
    <script>
        let img = document.querySelector('img')
        document.addEventListener('mousemove', function (e) {
            // 不断得到当前的鼠标坐标
            // console.log(e.pageX)
            // console.log(e.pageY)
            // 把坐标给图片
            // img.style.left = '100px'
            img.style.left = e.pageX - 50 + 'px'
            img.style.top = e.pageY - 40 + 'px'
        })
    </script>
</body>

</html>

事件流

事件流和两个阶段说明

事件流指的是事件完整执行过程中的流动路径

说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

简单来说：捕获阶段是从父到子冒泡阶段是从子到父

事件捕获和事件冒泡

事件冒泡概念: 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

事件冒泡是默认存在的


<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        let fa = document.querySelector('.father')
        let son = document.querySelector('.son')
        fa.addEventListener('click', function () {
            alert('我是爸爸')
        },)
        son.addEventListener('click', function () {
            alert('我是儿子')
        },)
        document.addEventListener('click', function () {
            alert('我是爷爷')
        },)

        // btn.onclick = function() {}
    </script>
</body>

事件捕获概念：

从DOM的根元素开始去执行对应的事件 (从外到里)

事件捕获需要写对应代码才能看到效果

代码：

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

说明：

addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）

若传入false代表冒泡阶段触发，默认就是false

若是用 L0 事件监听，则只有冒泡阶段，没有捕获；

阻止事件流动

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

若想把事件就限制在当前元素内，就需要阻止事件流动

阻止事件流动需要拿到事件对象

语法：

事件对象.stopPropagation()

此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果

mouseenter 和 mouseleave 没有冒泡效果(推荐)

阻止默认行为，比如链接点击不跳转，表单域的不提交

语法：

e.preventDefault()

两种注册事件的区别:

传统on注册(L0)
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)直接使用nu11覆盖偶就可以实现事件的解绑
都是冒泡阶段执行的

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