事件对象及属性

事件对象

事件流

事件委托

综合案例

事件对象

获取事件对象

事件对象常用属性

  1. 什么是事件对象?

    1.1 也是个对象，这个对象里有事件触发时的相关信息

    1.2 例如鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

  2. 如何获取

    2.1 在事件绑定的回调函数的第一个参数就是事件对象

    2.2 一般命名为 event、ev、e

    2.3 元素.addEventListener('click', function(e --> 事件对象) {})

  3. 事件对象常用属性

    • type 当前的事件类型

    • pageX/pageY 获取光标相对于当前文档左上角的位置

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

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

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

  4. demo

<!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>
        button{
            position: absolute;
            top:0;
            left:0;
        }
    </style>
​
</head>
<body>
    <button>确定</button>
​
    <script>
        let btn = document.querySelector('button')
        document.addEventListener('mousemove', function(e) {
            console.log(e.pageX,e.pageY);
            btn.style.left = e.pageX - 20 + 'px'
            btn.style.top = e.pageY - 20 + 'px'
        })
    </script>
</body>
</html>

事件流

事件流与两个阶段说明

事件捕获和事件冒泡

阻止事件流动

  1. 什么是事件流？

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

    1.2 父到子 --> 捕获

    1.3 子到父 --> 冒泡

  2. 事件捕获

    2.1 从 DOM 的根元素开始去执行对应的事件

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

    • true 捕获阶段触发

    • false 冒泡阶段触发 默认

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

    2.3 demo

<!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>
</head>
<body>
    <div class="father">123
        <div class="son">123</div>
    </div>
​
    <script>
        let f = document.querySelector('.father')
        let s = document.querySelector('.son')
        // 捕获
        f.addEventListener('click', function() {
            alert('father')
        }, true)
​
        s.addEventListener('click', function() {
            alert('son')
        }, true)
    </script>
</body>
</html>

  1. 事件冒泡

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

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

    3.3 事件冒泡是默认存在的

    3.4

<!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>
</head>
<body>
    <div class="father">123
        <div class="son">123</div>
    </div>
​
    <script>
        let f = document.querySelector('.father')
        let s = document.querySelector('.son')
        // 当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
        f.addEventListener('click', function() {
            alert('father')
        })
​
        s.addEventListener('click', function() {
            alert('son')
        })
    </script>
</body>
</html>

  1. 阻止事件流动

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

    4.2 语法 事件对象.stopPropagation()

    4.3 demo

<!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>
</head>
<body>
    <div class="father">123
        <div class="son">123</div>
    </div>
​
    <script>
        let f = document.querySelector('.father')
        let s = document.querySelector('.son')
        // 当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
        // 阻止事件流动需要拿到事件对象
        f.addEventListener('click', function() {
            alert('father')
        })
​
        s.addEventListener('click', function(e) {
            alert('son')
            e.stopPropagation()
        })
    </script>
</body>
</html>

  1. 鼠标经过事件

    5.1 mouseover 和 mouseout 有冒泡效果

    5.2 mouseenter 和mouseleave 没有冒泡效果

    5.3 demo

<!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>
        .father{
            width: 500px;
            height: 500px;
            background-color: red;
        }
​
        .son{
            width: 250px;
            height: 250px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
​
    <script>
        let f = document.querySelector('.father')
        let s = document.querySelector('.son')
​
        f.addEventListener('mouseover', function() {
            console.log(111);
        })
    </script>
</body>
</html>

  1. 阻止默认行为

    6.1 比如链接点击不跳转，表单域的跳转

    6.2 语法 e.preventDefault()

    6.3 demo

<!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>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
​
    <script>
        let a = document.querySelector('a')
​
        a.addEventListener('click', function(e) {
            e.preventDefault()
        })
    </script>
</body>
</html>

  1. 两种注册事件

    • 传统 on 注册（L0）

      同一个对象，后面注册的事件会覆盖前面的注册

      直接使用 null 覆盖就可以实现事件的解绑

      都是冒泡阶段执行的

    • 事件监听注册（L2）

      后面注册的事件不会覆盖前面注册的事件

      可以通过第三个参数去确定是在冒泡或者捕获阶段执行

      必须使用 removeEventListener （事件类型，事件处理函数，获取捕获或者冒泡阶段）

      匿名函数无法被解绑

事件委托

  1. 事件委托是利用事件流的特征解决一些开发需求的知识技巧

  2. demo

<!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>
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <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.target.classList.add('active')
        })
    </script>
</body>
</html>

DOM04~的更多相关文章

  1. eCharts_基于eCharts开发的一个多图表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 如何优化大场景实时渲染？HMS Core 3D Engine这么做

    在先前举办的华为开发者大会2022(HDC)上,华为通过3D数字溪村展示了自有3D引擎"HMS Core 3D Engine"(以下简称3D Engine)的强大能力.作为一款高性 ...

  2. uniapp微信小程序 原生底部导航栏

    在pages.json文件中写  "tabBar": { "color": "#333333", "selectedColor&q ...

  3. 2022NewStarCTF新生赛一些比较有意思的题目wp

    Misc_蚁剑流量分析 Pcap的文件可以直接使用工具 编辑器打开目录,一个一个看,可以找到eval危险函数 看到n3wst4r,直接使用linux正则匹配,找出相关内容 Url解码,了解一下蚁剑流量 ...

  4. HHKB Programming Contest 2022 Winter(AtCoder Beginner Contest 282)

    前言 好久没有打 AtCoder 了.有点手生.只拿到了 \(\operatorname{rk}1510\),应该上不了多少分. 只切了 \(\texttt{A,B,C,D}\) 四题. A - Ge ...

  5. iOS如何实现自动化打包

    iOS如何实现自动化打包 前言 在我们的日常开发工作中,避免不了会出现这样的场景:需求迭代开发完成之后,需要提供ipa包给QA同学进行测试,一般会执行如下流程:1.执行Git Pull命令,拉最新的代 ...

  6. 普冉PY32系列(三) PY32F002A资源实测 - 这个型号不简单

    目录 普冉PY32系列(一) PY32F0系列32位Cortex M0+ MCU简介 普冉PY32系列(二) Ubuntu GCC Toolchain和VSCode开发环境 普冉PY32系列(三) P ...

  7. 探讨下如何更好的使用缓存 —— Redis缓存的特殊用法以及与本地缓存一起构建多级缓存的实现

    大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 通过前面的文章,我们一起剖析了Guav ...

  8. SSM进行Query

    在查询之前,需要输入数据库字段的名称,s_id需要获取

  9. C#移除字符串中的不可见Unicode字符

    背景 最近发现某个数据采集的系统拿下来的数据,有些字段的JSON被莫名截断了,导致后续数据分析的时候解析JSON失败. 类似这样 {"title": "你好 或者这样,多 ...

  10. 谈谈Selenium中的三种切换之alert

    谈谈Selenium中的三种切换之alert 一.如何识别 识别方法:alert中的确定.取消.输入框无法用inspector定位到,当然还有一些特例. alert分为三种 alert confirm ...