JS事件对象、事件流、事件委托

最新推荐文章于 2023-03-20 10:36:15 发布

一个爱编程的00后

最新推荐文章于 2023-03-20 10:36:15 发布

阅读量249

点赞数

分类专栏： javascript 文章标签： javascript 前端开发语言 html css

本文链接：https://blog.csdn.net/qq_57193827/article/details/125935793

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

WEBAPIS

前言

本文记录每天学习JS的进程

一、事件对象是什么？

也是对象，但是存在于事件之中（比如说鼠标点击事件，事件对象存储了鼠标点击的位置等信息）

1.如何获取

元素.addeventListener('click',function(e) {



});

>> 一般就是事件绑定回调函数的第一个参数

>> 一般命名为event 、ev、 e

    <button>点击</button>
    <script>
        let btn = document.querySelector('button')
        btn.addEventListener('click',function (e) {
            console.log(e);
        })
    </script>

点击之后的信息打印:

2.常用的属性

    <script>
        // 给文档添加监听事件  全局有效
        // 鼠标移动事件
        document.addEventListener('click',function (e) {
            // -- 跟整个页面大小有关系
            console.log(e.pageX + ' ' + e.pageY);
            // 记录鼠标的位置 clientX clientY
            //  -- 与可视区域有关
            console.log(e.clientX+ ' ' + e.clientY);
        })
         
    </script>

3.鼠标事件案例(跟随鼠标移动)

<!-- css的样式
  
position: absolute;  --  必须设置为绝对值才可
 -->
<style>
        img{
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
        }
</style>

    <img src="../../公用资源/图片/1.jpg" alt="测试案例">
    <!-- 只需要鼠标的坐标就行 -->

    <script>

        let img = document.querySelector('img')
        document.addEventListener('mousemove',function (e) {
            // 必须跟着单位才行，不然不能动
            img.style.left = e.pageX + 'px'
            img.style.top = e.pageY + 'px'
            
        })
    </script>

> 成品就不展示了，自己可以写一下

4.键盘事件案例 (结合微博发布案例)

> keydown 键盘按下时触发

> keyup 键盘升起时触发

> e.key 能查看当前按下的键 (不建议用keyCode)

           area.addEventListener('keydown',function (e) {
               if(e.key === 'Enter'){
                    // 发布新闻
                   // 自动触发点击按钮
                    btn.click();
               }
               
           })
        //  键盘弹起就清空
        area.addEventListener('keyup',function (e) {
               if(e.key === 'Enter'){
                    // 发布新闻
                    // 自动触发点击按钮
                    area.value = ''
                 useCount.innerHTML = 0
               }

           })

二、事件流和事件委托(概念)

1.事件流

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

doucumen - 最大

点击一个div 两个阶段

A. 捕获阶段 (一层一层的找 ) 父 - 子 [了解]

Document - html - body - div 找到从DOM元素的根去找对应的时间 (从外到里)

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

是否使用捕获阶段:

a. true -- 捕获

b. false -- 冒泡 (默认)


// L0 监听时间
btn.onclick = function () {

   //  只有冒泡

}

B. 冒泡阶段（找到之后回流）子- 父 [掌握]

某一个元素事件被触发后，同样的事件将会在该元素的所有祖先元素中依次被触发。

ps:此过程就是事件冒泡

特别注意同名事件才会触发冒泡

click -- 单击事件

dblclick -- 双击事件

都同为双击或者单击才会有反应

2.阻止事件流动

因为有冒泡的原因

这个代码会响应三次 (点击粉红色的儿子处时)

我们想点哪谈哪所以采用一下事件阻止

注意: 添加到哪里哪里就会阻止其余不受影响继续冒泡

e.stopPropagation(); // 阻止冒泡

mouseover mouseout 鼠标经过事件 --> 会产生冒泡效果

mouseenter mouseleave 鼠标经过事件 --> 没有冒泡效果（推荐）

2.1 阻止一些默认行为 (链接点击不跳转，表单域的跳转) -- 与冒泡没关系

e.stopPropagation(); // 阻止默认行为


    <a href="https://www.baidu.com/" >百度网址</a>

    <script>
        let src = document.querySelector('a')
        src.addEventListener('click',function (e) {
            // 设置不能进行跳转 
            e.preventDefault(); // 提交表单是一样的
        })
    </script>

测试L 点击不了

三、事件委托？

事件委托是利用事件的特征解决问题的一些开发技巧

给父亲添加事件通过父亲来控制孩子而不是用循环进行操作

通过事件对象e.target来控制当前你选择的对象来进行操作

    <ul>
        <li>我是第1个小li</li>
        <li>我是第2个小li</li>
        <li>我是第3个小li</li>
        <li>我是第4个小li</li>
        <li>我是第5个小li</li>
    </ul>
    <script>
        // 事件委托
        let ul = document.querySelector('ul')
        ul.addEventListener('click',function (e) {
            // e是事件对象
            console.log(e.target);
            // 通过父亲来进行更改孩子
            e.target.innerHTML = `213`
            e.target.style.color = 'red'
        })
    </script>