事件对象及属性

事件对象

事件流

事件委托

综合案例

事件对象

获取事件对象

事件对象常用属性

  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. Anaconda下载安装

    下载地址: 链接:https://pan.baidu.com/s/1fmJkMSL6amJF4KP5JwklOQ 提取码:dsyc 安装完成之后,记得配置系统环境变量:

  2. 基于.NetCore开发博客项目 StarBlog - (22) 开发博客文章相关接口

    前言 本文介绍博客文章相关接口的开发,作为接口开发介绍的第一篇,会写得比较详细,以抛砖引玉,后面的其他接口就粗略带过了,着重于WebApi开发的周边设施. 涉及到的接口:文章CRUD.置顶文章.推荐文 ...

  3. uniapp 微信小程序 根据经纬度解析地址（腾讯地图）

    //引入腾旭地图sdk import QQMapWX from '../../common/qqmap-wx-jssdk.js' onLoad(){ this.getMapAddress() }, m ...

  4. [WPF]xml序列化以及反序列化数据

    代码 XML序列化工具类 public static class XMLHelper { /// <summary> /// 将对象序列化为指定的文件名 /// </summary& ...

  5. SwiftUI（二）

    也许很多人看完一会有一个疑问,为什么UIHostingController我这里报错呢     看到这里大家心中的疑问也就解开了 接下来给大家说下@State的作用 通过@State swiftUI实 ...

  6. &amp;#127538;Eclipse通过jdbc连接数据库制作简单登陆界面【新手必看】

    一.前言: 做网站开发,要求有多种搭配方式,前台技术可以使用PHP.ASP.JSP.ASP.NET.CGI等任何一种: 需要用到的基础语言用的最多的就是HTML/CSS.JS.JAVA.XML这些了, ...

  7. 手把手教你写Dockerfile以及测试

    Dockerfile是什么? dockerfile就是用来构建docker镜像的构建文件,命令参数脚本. 如何使用Dockerfile? 1.编写一个Dockerfile文件 2.docker bui ...

  8. 包装类总结-Collection集合概述

    包装类总结 1.基本数据类型对应的包装类byte Byteshort Shortint Integerlong Longfloat Floatdouble Doublechar Characterbo ...

  9. vulnhub靶场之MOMENTUM: 2

    准备: 攻击机:虚拟机kali.本机win10. 靶机:Momentum: 2,下载地址:https://download.vulnhub.com/momentum/Momentum2.ova,下载后 ...

  10. 【一句话】@Configuration和@Component的区别

    首先一句话: @Configuration修饰的类会被Cglib动态代理,@Component不会. 详细: Cglib动态代理生成当前对象的子类Class,并对方法拦截,多次调用@Bean方法时直接 ...