事件对象及属性

事件对象

事件流

事件委托

综合案例

事件对象

获取事件对象

事件对象常用属性

  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 之匿名函数(lambda)

    什么是匿名函数?匿名函数就是不用def关键字,使用lambda关键字定义的一个函数.匿名函数简约而不简单. 匿名函数的格式: lambda[ paramters1, paramters2 , .... ...

  2. MongoDB 索引原理与索引优化

    转载请注明出处: 1.MongoDB索引 索引通常能够极大的提高查询的效率, 如果没有索引, MongoDB 在读取数据时必须扫描集合中的每个文件并选取那些符合查询条件的记录.这种扫描全集合的查询效率 ...

  3. 使用APICloud AVM多端组件快速实现app中的搜索功能

    很多 APP 中都有搜索功能的需求,本文介绍怎么使用 avm 多端组件快速实现搜索功能. 在 APICloud 模块库搜索 animate-UISearchBar,添加到项目.多端组件需要下载源码,引 ...

  4. vue 中安装并使用echart

    本文为博主原创,转载请注明出处: 1.安装echart 依赖: 安装命令: npm install echarts --save 在vscode 的终端窗口进行执行,如图所示: 执行完之后,查看 项目 ...

  5. [WPF]ICommand最佳使用方法

    public class RelayCommand:ICommand { private Predicate<object> _canExecute; private Action< ...

  6. 【公式详解】【优秀论文解读】EDPLVO: Efficient Direct Point-Line Visual Odometry

    前言 多的不说哈 2022最佳优秀论文 来自美团无人机团队 作者提出了一种使用点和线的高效的直接视觉里程计(visual odometry,VO)算法-- EDPLVO .他们证明了,2D 线上的 3 ...

  7. 【Java应用服务体系】「序章入门」全方位盘点和总结调优技术专题指南

    专题⽬标 本系列专题的目标是希望可以帮助读者们系统和全访问掌握应⽤系统调优的思路与方案以及相关的调优工具的使用,虽然未必会覆盖目前的所有的问题场景,但是还是提供了较为丰富的案例和调优理论,会帮助大家打 ...

  8. （18）go-micro微服务ELK介绍

    目录 一 什么是ELK 二 Beats的六种工具 三 ELK系统的特点 四 ELK+beats系统架构 五 ELK优点 六 最后 一 什么是ELK ELK是三个[开源软件]的缩写,分别表示:Elast ...

  9. Docker 基础 - 1

    镜像 获取镜像 docker pull 查看镜像信息 docker images docker inspect <images id> # 获取镜像的详细信息 搜寻镜像 docker se ...

  10. ionic+vue+capacitor系列笔记--02项目中集成Capacitor，添加android，ios平台，真机运行项目

    Capacitor是什么? Capacitor是由ionic团队开发的一款跨平台移动应用构建工具,可轻让我们轻松的构建Android.iOS.Electron和Web应用程序. Capacitor是A ...