事件对象及属性

事件对象

事件流

事件委托

综合案例

事件对象

获取事件对象

事件对象常用属性

  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. NSSCTF_HUBUCTF的web部分题解

    checkin 题目: 主要是php弱比较和序列化知识点考察 <?php $username = "this_is_secret"; $password = "th ...

  2. 中国蚁剑 - AntSword

    中国蚁剑 - AntSword 中国蚁剑是一种跨平台操作工具,它主要提供给用户用于有效的网络渗透测试以及进行正常运行的网站. 否则任何人不得将网站用于其无效用途以及可能的等目的.自己承担并追究其相关责 ...

  3. [python] CairoSVG使用教程

    1 CairoSVG介绍 代码下载地址 CairoSVG是一个将SVG1.1转为PNG,PDF, PS格式的转化.SVG算目前火热的图像文件格式了,它的英文全称为Scalable Vector Gra ...

  4. Python Excel 追加数据

    xlutils 库的安装 你好,我是悦创. 前面我分享了 Excel 的读写:Python 实现 Excel 的读写操作:https://bornforthis.cn/column/pyauto/au ...

  5. python进阶之路8 字典、元组、集合内置方法 编码理论

    内容回顾 作业讲解 1.前期不熟练的情况下一定要先写注释 2.一定要仔细思考每一行代码的含义 3.自己不会的代码或者不熟练的代码一定要多敲多练 数据类型内置方法简介 所有的数据类型基本上都自带了一些操 ...

  6. PowerUsageSummary.java源码分析

    在在线网站http://androidxref.com/上对Android版本6.0.1_r10源码进行分析 官方手机的应用耗电排行具体实现位置在:/packages/apps/Settings/sr ...

  7. C++Day09 深拷贝、写时复制(cow)、短字符串优化

    一.std::string 的底层实现 1.深拷贝 1 class String{ 2 public: 3 String(const String &rhs):m_pstr(new char[ ...

  8. 通俗易懂angular搭建

  9. 实操记录之-----Ant Design of Vue 增强版动态合并单元格，自动根据数据进行合并，可自定义横纵向合并

    前几天搞了个简易版的动态合并单元格 但是需求有变化,就只能稍微改改了~~ 欢迎路过的各位大佬指出我代码的问题~~~~ 另: 代码执行效率不是很高,如果需要大量渲染更多数据建议可以直接使用原生 < ...

  10. immutable.js学习笔记（一）----- immutable.js 简介

    一.Immutable.js 介绍 Immutable.js 官方文档 : https://immutable-js.github.io/immutable-js/ 关于Immutable的定义,官方 ...