事件对象及属性

事件对象

事件流

事件委托

综合案例

事件对象

获取事件对象

事件对象常用属性

  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. python之元组(tuple)知识点

    元组与列表都是容器,两个的区别在于: 1.元组使用的是小括号,列表使用的是方括号 2.元组一旦定义不可修改,而列表是可以随意变更 创建元组 元组的创建与列表大同小异,逗号在元组中充当了元组的灵魂,创建 ...

  2. 在nodejs中体验http/2

    前言 2015年,HTTP/2 发布,直到2021年公司的项目才开始在实践中应用:自己对http2诸多特点的理解只存在于字面上,于是尝试在nodejs中实践一下,加深自己的理解. 多路复用 同域名下所 ...

  3. 解决RockyLinux和Centos Stream 9中firefox无法播放HTML视频问题

    如题在测试两种centos后续系统时,发现firefox无法播放HTML视频问题.经过一番折腾找到了解决的办法,具体解决如下: 首先下载VLC $sudo yum install vlc 而后重启浏览 ...

  4. 痞子衡嵌入式：Farewell, 我的写博故事2022

    -- 题图:苏州荷塘月色 2022 年的最后一天,写个年终总结.困扰大家三年之久的新冠疫情终于在 12 月全面放开了,痞子衡暂时还没有阳,计划坚持到总决赛.对于 2023 年,痞子衡还是充满期待的,慢 ...

  5. [OpenCV实战]19 使用OpenCV实现基于特征的图像对齐

    目录 1 背景 1.1 什么是图像对齐或图像对准? 1.2 图像对齐的应用 1.3 图像对齐基础理论 1.4 如何找到对应点 2 OpenCV的图像对齐 2.1 基于特征的图像对齐的步骤 2.2 代码 ...

  6. 用python爬取网络文章----滴天髓

    用python爬取网络文章真的很简单.主要分以下几个步骤 1.安装并导入相关模块. 这里我们要用到两个模块,分别是reqesets和lxml 安装命令pip install requests和pip ...

  7. 处理流中的异常-JDK7-和JDK9流中异常的处理

    处理流中的异常 JDK7和JDK9流中异常的处理 jdK7的新特性在try的后边可以增加一个(),在括号中可以定义流对象那么这个流对象的作用域就在try中有效try中的代码执行完毕,会自动把流对象释放 ...

  8. 如何通过Java代码向Word文档添加文档属性

    Word文档属性包括常规.摘要.统计.内容.自定义.其中摘要包括标题.主题.作者.经理.单位.类别.关键词.备注等项目.属性相当于文档的名片,可以添加你想要的注释.说明等.还可以标注版权. 今天就为大 ...

  9. 【FAQ】申请运动健康服务验证环节常见问题及解答

    华为 HMS Core 运动健康服务(HUAWEI Health Kit)提供原子化数据开放.应用在获取用户数据授权后,可通过接口访问运动健康数据,对用户数据进行读写等操作,为用户提供运动健康类数据服 ...

  10. 复杂环境下ocr与印章识别技术理解及研发趋势

    引言 随着社会经济的发展,印章作为企事业单位.社会团体.政府部门乃至国家的一种具有法律意义的标志和证据,在现代社会生活中发挥着重要作用.随着现代商务活动的不断发展,企业在业务开展的过程中通常会涉及大量 ...